Angularjs Select

1、概念及定义

     1》可以用数组或对象创建一个下拉列表。

     2》使用ng-options创建下拉框

   <div ng-app="Myapp" ng-controller="MyControll">
        <select ng-model="mySelect"  ng-options="x for x in selectOptions"></select>
    <script>
        var app = angular.module("Myapp", []).controller("MyControll",
            function ($scope) {
                $scope.selectOptions = ["12","123","1234"];
            });
    </script>

      3》可以用ng-repeat循环绑定option的值可以达到上面一样的目的

    <div ng-app="Myapp" ng-controller="MyControll">
        <select>
            <option ng-repeat="x in selectOptions" value="{{x.val}}">{{x.name}}</option>
        </select>
    </div>
    <script>
        var app = angular.module("Myapp", []).controller("MyControll",
            function ($scope) {
                $scope.selectOptions = [{ name: "google", val: "1" },{ name: "baidu", val: "2" }, { name: "soso", val: "3" }];
            });
    </script>

       4》比较ng-repeat和ng-options区别

            总结这个问题：

               1.ng-repeat绑定的下拉列表，通过下拉的模型只能获取选择的值，不能获取到名称；

               2.ng-options绑定的下拉列表，可以通过模型获取选中的对象；更加灵活；可以同时获取到名称和选中的值；

               3.根据自己业务需求进行选择，个人建议采用ng-options 更加方便，两个值都可以取到；

           案例源码和效果图如下：

  <div ng-app="Myapp" ng-controller="MyControll">
        <select ng-model="repeatSelect">
            <option ng-repeat="x in selectOptions" value="{{x.val}}">{{x.name}}</option>
        </select><br />
        ng-repeat选择的值：{{repeatSelect}}<br/>

        <select ng-model="OpectSelect" ng-options="x.name for x in selectOptions">
        </select><br />
        ng-options选择的项：{{OpectSelect.name}}<br />
        ng-options选择的值：{{OpectSelect.val}}
    </div>
    <script>
        var app = angular.module("Myapp", []).controller("MyControll",
            function ($scope) {
                $scope.selectOptions = [{ name: "google", val: "1" },{ name: "baidu", val: "2" }, { name: "soso", val: "3" }];
            });
    </script>

 

        5》总结：ng-options选择的是一个对象

 <div ng-app="Myapp" ng-controller="MyControll">
            <select ng-model="OpectSelect" ng-options="x.name for x in selectOptions"></select><br />
            ng-options选择的名称：{{OpectSelect.name}}<br />
            ng-options选择的值：{{OpectSelect.val}}<br />
            ng-options选择的路径:<a href="{{OpectSelect.url}}" target="_self">{{OpectSelect.url}}</a>
    </div>
    <script>
        var app = angular.module("Myapp", []).controller("MyControll",
            function ($scope) {
                $scope.selectOptions = [{ name: "google", val: "1",url:"http://www.google.com" },{ name: "baidu", val: "2",url:"http://www.baidu.com"},{ name: "soso", val: "3",url:"http://www.soso.com" }];
                   });
    </script>

       6》设置select 默认选择项

<div ng-app="Myapp" ng-controller="MyControll">
        <select ng-model="OpectSelect" ng-options="x.val as x.name for x in selectOptions"></select><br />
        ng-options选择的值：{{OpectSelect}}<br />
    </div>
    <script>
        var app = angular.module("Myapp", []).controller("MyControll",
            function ($scope) {
                $scope.selectOptions = [{ name: "google", val: "1", url: "http://www.google.com" },{ name: "baidu", val: "2", url: "http://www.baidu.com" },{ name: "soso", val: "3", url: "http://www.soso.com" }];
                //向数组中添加一个对象
                $scope.selectOptions.unshift({ name: "请选择", val: "0", url: "123" });
                //设置变量的值为数组的第一个对象
                $scope.OpectSelect = $scope.selectOptions[0].val;
            });
    </script>

以上就是select 下拉框用angerlarjs来实现绑定和取值的所有了，感觉比MVC绑定简单方便多了；

可以说只要拿到数据源分分钟搞定；可能这就是angularjs的魅力之处吧！！！

 

 最后附加一个三级联动的文章：

http://www.cnblogs.com/xythree/articles/3949236.html