发布于 4年前

Angular select 中 ng-options 的使用

这里面值得一提的是ng-model一定要绑定
ng-change 可以触发方法 在方法内部去取ng-model绑定的值 就是下拉框选中的数据项


<html>

<head>
    <title></title>
    <style type="text/css">

    </style>
</head>

<body ng-app='myApp' ng-controller='myCtrl'>
    <!-- ng-options里面可以理解为 前面括号里面的数据来自后面循环中data的值 -->
    <select ng-model="ipt" ng-change="test()" ng-options="(data.name+' 的id为: '+data.id) for data in datas">
        <!-- ng-selected后面为true被选中 -->
        <option value=""  ng-selected=''>-- 请选择 --</option>
    </select>
    <script src="https://cdn.bootcss.com/angular.js/1.2.0/angular.js"></script>
    <script type="text/javascript">
    angular.module('myApp', [])
        .controller('myCtrl', ['$scope', function($scope) {
            $scope.ipt = ''; //绑定选择框数据
            $scope.datas = [{
                id: 10001,
                name:'zhangsan'
            }, {
                id: 10002,
                name:'lisi'
            }, {
                id: 10003,
                name:'wangwu'
            }]
            $scope.test = function(){
                console.log($scope.ipt)
            }
        }])
    </script>
</body>

</html>
©2020 edoou.com   京ICP备16001874号-3