Angularjs's ng-options directive

1. Basic pull-down effect (lable for value in array)

Where the Ng-model attribute in the SELECT tag must have a value of the selected object or property value.

　　

    <div ng-controller= "Ngselect" >        <p>usage:label for value in array</p>        <p> options, {{ selected}}</p>        <select ng-model= "selected" ng-options= "O.id for O in Optdata" >            <option value= " ">--Please select--</option>        </select>    </div>    m1.controller (" Ngselect ", [' $scope ', function ($SC) {        $sc. selected = ';        $sc. Optdata = [{            id:10001,            maincategory: ' Male ',            ProductName: ' Washed T-shirt ',            productcolor: ' White '        },{            id:10002,            Maincategory: ' Women ',            ProductName: ' Short sleeves ',            productcolor: ' Yellow '        },{            id:10003,            maincategory: ' Women ' ,            ProductName: ' Short sleeves ',            productcolor: ' Yellow '        }];    }]);

2. Custom drop-down display name (label for value in array)

label can stitch different strings as needed　　

 <div ng-controller= "Ngselect2" > <p>usage:label for Value In array (label can stitch different strings according to demand) </p> <p> options,{{selected}}</p> <select ng-model= "selected" Ng-options= "(o.productcolor+ '-' +o.productname) for O in Optdata" > <option value= "" >--Please select--</optio N> </select> </div> m1.controller ("Ngselect2", [' $scope ', function ($SC) {$sc. Selected = '        ‘; $sc. Optdata = [{id:10001, maincategory: ' Male ', ProductName: ' Washed T-shirt ', productcol Or: ' White '},{id:10002, maincategory: ' Female ', ProductName: ' Short sleeves ', PRODUCTC Olor: ' Yellow '},{id:10003, maincategory: ' Female ', ProductName: ' Short sleeves ', produc    TColor: ' Yellow '}]; }]);

3.ng-options option Grouping

GROUP by group Items　　

 <div ng-controller= "NGSELECT3" > <p>usage:label Group BY GroupName for value in array</p> <p> options,{{selected}}</p> <select ng-model= "selected" ng- Options= "(o.productcolor+ '-' +o.productname) group by O.maincategory for O in Optdata" > <option value= "" &G        t;--Please select--</option> </select> </div> m1.controller ("Ngselect3", [' $scope ', function ($SC) {        $sc. Selected = "; $sc. Optdata = [{id:10001, maincategory: ' Male ', ProductName: ' Washed T-shirt ', productcol Or: ' White '},{id:10002, maincategory: ' Female ', ProductName: ' Long sleeves ', PRODUCTC Olor: ' Yellow '},{id:10003, maincategory: ' Female ', ProductName: ' Short sleeves ', produc    TColor: ' Yellow '}]; }]);

4.ng-options Binding of Custom Ngmodel

The value of the selected below is the Optdata ID effect HTTP://SANDBOX.RUNJS.CN/SHOW/NHI8UBRB　　

    <div ng-controller= "Ngselect4" >        <p>usage:select as label for value in array</p>        <p> options ,{{selected}}</p>        <select ng-model= "selected" ng-options= "O.id as O.productname for O in Optdata" >            <option value= "" >--Please select--</option>        </select>    </div>    m1.controller (" Ngselect4 ", [' $scope ', function ($SC) {        $sc. selected = ';        $sc. Optdata = [{            id:10001,            maincategory: ' Male ',            ProductName: ' Washed T-shirt ',            productcolor: ' White '        },{            id:10002,            Maincategory: ' Women ',            ProductName: ' Long sleeves ',            productcolor: ' Yellow '        },{            id:10003,            maincategory: ' Women ' ,            ProductName: ' Short sleeves ',            productcolor: ' Yellow '        }];    }]);

Effect: HTTP://RUNJS.CN/DETAIL/NHI8UBRB

Angularjs ng-options Directive