sibling directives
by v v.
HTML
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://jsfiddle.net/gerlstar/okqrc8p8/1/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<div ng-controller="InfoCtrl">
Types:
<select-box id="" name="Type" ng-model="model.Type" optExp="Type.id as Type.name for Type in Types"></select-box>
SEries:
<select-series id="series" name="series" class="form-control" optExp="series.id as series.name for series in Series" ng-model="model.Series"></select-series>
</div>
JavaScript
angular.module('myAppApp', [])
.controller('InfoCtrl', function ($scope, $controller) {
$scope.Types = [{
"id": "dog",
"name": "dog"
}, {
"id": "cat",
"name": "cat"
}, {
"id": "bird",
"name": "bird"
}, {
"id": "turtle",
"name": "turtle"
}];
$scope.Series = [{
"id": "spaghetti",
"name": "spaghetti"
}, {
"id": "eggs",
"name": "eggs"
}];
})
.directive('selectBox', function () {
return {
restrict: 'E',
replace: true,
scope: false,
template: function (element, attrs) {
return '<div class="selectBox selector">' + '<select " class="form-control" name="' + attrs.name + '" ng-model="' + attrs.ngModel + '" ng-options="' + attrs.optexp + '"' + ' ng-disabled="' + attrs.selectdisabled + '"></select>' + '</div>';
}
};
})
//
.directive('selectSeries', function() {
return {
restrict: 'E',
replace: true,
scope: false,
template: function(element, attrs) {
return '<div><select class="form-control" name="' + attrs.name + '" ng-model="' + attrs.ngModel + '" ng-options="series.id as series.name for series in series" ' + ' disabled="disabled" ></select></div>';
},
link: function (scope, el, attrs) {
scope.$watch('model.PlanType', function(value,b){
if (value !== null){
attrs.$set('ngOptions', 'series.id as series.name for series in series');
}
},this);
}
};
});