Thursday, 10 November 2016

Select Option

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'},
  ];
});





No comments:

Post a Comment