http://jsfiddle.net/n7ZCg/
Html:
<div ng-controller="myAppList">
<select ng-model="query" ng-options="c.id as c.id for c in countries | unique:'id'" value="{{c.id}}">
<option value="0">Default</option>
</select>
<ul>
<select >
<option ng-repeat="c in countries | filter:{id:query}" value="{{c.name}}">{{c.name}}</option>
</select>
</ul>
<ul>
<select>
<option ng-repeat="c in countries | filter:{id:query}" value="{{c.city}}">{{c.city}}</option>
</select>
</ul>
</div>
JavaScipt:
var myApp = angular.module('myApp', ['ui.directives','ui.filters']);
myApp.controller('myAppList', function myAppList($scope) {
$scope.countries = [
{'city': 'newDelhi','name': 'Delhi', 'id':'india'},
{'city': 'oldDelhi','name': 'Bangalore', 'id':'india'},
{'city': 'bangalore','name': 'UP', 'id':'india'},
{'city': 'jhapa','name': 'Kathmandu', 'id':'Nepal'},
{'city': 'morang','name': 'Bhadrapur', 'id':'Nepal'},
{'city': 'rajbraj','name': 'Ithari', 'id':'Nepal'},
];
});
Html:
<div ng-controller="myAppList">
<select ng-model="query" ng-options="c.id as c.id for c in countries | unique:'id'" value="{{c.id}}">
<option value="0">Default</option>
</select>
<ul>
<select >
<option ng-repeat="c in countries | filter:{id:query}" value="{{c.name}}">{{c.name}}</option>
</select>
</ul>
<ul>
<select>
<option ng-repeat="c in countries | filter:{id:query}" value="{{c.city}}">{{c.city}}</option>
</select>
</ul>
</div>
JavaScipt:
var myApp = angular.module('myApp', ['ui.directives','ui.filters']);
myApp.controller('myAppList', function myAppList($scope) {
$scope.countries = [
{'city': 'newDelhi','name': 'Delhi', 'id':'india'},
{'city': 'oldDelhi','name': 'Bangalore', 'id':'india'},
{'city': 'bangalore','name': 'UP', 'id':'india'},
{'city': 'jhapa','name': 'Kathmandu', 'id':'Nepal'},
{'city': 'morang','name': 'Bhadrapur', 'id':'Nepal'},
{'city': 'rajbraj','name': 'Ithari', 'id':'Nepal'},
];
});

No comments:
Post a Comment