Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en" ng-app="app">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <script src="angular.min.js"></script>
- <style>
- html{
- font-size: 1em;
- font-family: Verdana;
- }
- .cmp{
- background-color: red;
- }
- </style>
- </head>
- <body ng-controller="micontrolador as ctrl">
- <key-value-combo title="Size" selecteditem="ctrl.selectedsize" items="ctrl.sizeelements" ></key-value-combo>
- {{ctrl.selectedsize}}
- <key-value-combo title="ProductType" selecteditem="ctrl.selectedproducttype" items="ctrl.producttypeelements" ></key-value-combo>
- {{ctrl.selectedproducttype}}
- <script>
- var app = angular.module("app", []);
- app.controller("micontrolador", function(){
- this.sizeelements = [{id: 1, caption: "50 LITROS"},{id: 2, caption: "100 LITROS"}];
- this.selectedsize = 1;
- this.producttypeelements = [{id: 1, caption: "BEER"},{id: 2, caption: "CIDER"}];
- this.selectedproducttype = 1;
- });
- app.component('keyValueCombo', {
- restrict:'E',
- template:
- '<div> ' +
- ' <h1>{{ctrl.title}}</h1> ' +
- ' <select ' +
- ' ng-model = "ctrl.selecteditem" ' +
- ' ng-options = "item.id as item.caption for item in ctrl.items" ' +
- ' ng-change = "ctrl.update(ctrl.selecteditem)"> ' +
- ' </select> ' +
- '</div>',
- controllerAs:'ctrl',
- bindings: {
- title: '@',
- items: '<',
- selecteditem: "="
- },
- controller: function(){
- var vm = this;
- vm.update = function(e) {
- console.log("ahora");
- }
- }
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement