// Code goes here
var app = angular.module("myShoppingList", []);
app.controller("myCtrl",['$scope','productsRepository', function($scope,productsRepository) {
$scope.products =productsRepository.getAll();
$scope.selectdProduct={};
$scope.onSelectedProductChanged=function(item){
alert(item);
}
}]);
app.service("productsRepository",[function(){
return {
getAll:function(){return [
{
id:1,title:'Milk'
},
{
id:2,title:'Bread'
},
{
id:3,title:'Cheese'
}
]}
}
}]);
app.directive("productsComboBox",['$compile','productsRepository',function($compile,productsRepository){
return {
restrict:'E',
replace:true,
template:'<select></select>',
scope:{
ngModel:'='
},
require:'ngModel',
compile:function(elm,atts){
elm.attr('ng-options','item.id as item.title for item in items' );
var fn=$compile(elm);
return function(scope,elm,atts){
fn(scope);
scope.items=productsRepository.getAll();
console.log(scope.items);
}
}
}
}])
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script data-require="angular.js@*" data-semver="4.0.0" src="script.ts"></script>
<script data-require="angular.js@*" data-semver="4.0.0" src="system.config.js"></script>
<script data-require="angular.js@*" data-semver="4.0.0" src="tsconfig.json"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app='myShoppingList' ng-controller='myCtrl'>
<ul>
<li ng-repeat='product in products'>{{product.title}}</li>
</ul>
<products-combo-box ng-model='selectdProduct' ng-change='onSelectedProductChanged(selectdProduct)'></products-combo-box>
</body>
</html>
