zoukankan html css js c++ java

angular-selcet

常规用法
代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <select ng-model="selectedId"  ng-change="sChange()" ng-options="st.id as st.name for st in students">
            <option value="">--请选择--</option>
        </select>
        <script src="js/angular.js" ></script>
        <script ng-app="myApp" ng-controller="myCtrl">
            var app = angular.module('myApp',[]);
            app.controller('myCtrl', function($scope) {
                $scope.students=[
                    {id:123,name:"张三"}, 
                    {id:234,name:"李四"},
                    {id:345,name:"王五"}
                ];
                
                $scope.sChange=function(){
                    console.log($scope.selectedId)
                }
            });
        </script>
    </body>
</html>

效果

指定选中某一个
代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <select ng-model="selectedId"  ng-change="sChange()" ng-options="st.id as st.name for st in students">
        </select>
        <button ng-click="doDefalut()">恢复默认选择</button>
        <script src="js/angular.js" ></script>
        <script ng-app="myApp" ng-controller="myCtrl">
            var app = angular.module('myApp',[]);
            app.controller('myCtrl', function($scope) {
                $scope.selectedId=234;//初始化进入默认选中某个
                $scope.students=[
                    {id:123,name:"张三"}, 
                    {id:234,name:"李四"},
                    {id:345,name:"王五"}
                ];
                $scope.sChange=function(){
                    console.log($scope.selectedId)
                }
                $scope.doDefalut=function(){
                    $scope.selectedId=234;
                }
            });
        </script>
    </body>
</html>

效果

默认选中第一个
代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <select ng-model="selectedId"  ng-options="st.id as st.name for st in students">
        </select>
        <script src="js/angular.js" ></script>
        <script ng-app="myApp" ng-controller="myCtrl">
            var app = angular.module('myApp',[]);
            app.controller('myCtrl', function($scope) {
                $scope.students=[
                    {id:123,name:"张三"}, 
                    {id:234,name:"李四"},
                    {id:345,name:"王五"}
                ];
                
                $scope.selectedId=$scope.students[0].id;//初始化进入默认选中首个
                
                $scope.$watch('selectedId',function(oldv,newv){
                    /*之所以用监听，是因为js动态设置的选中的情况，不会触发ng-change事件。
                    但是监听也有个小问题，就是页面初始化的时候，selectedId会被误监听两次一样的
                    但是影响意义不大,可以忽略*/
                    console.log($scope.selectedId)
                })
            });
        </script>
    </body>
</html>

效果

参考：
http://blog.csdn.net/linzhiqiang0316/article/details/52489668
http://blog.csdn.net/u014628388/article/details/75194706
https://www.cnblogs.com/leolztang/p/5970894.html

查看全文

相关阅读:
拉格朗日插值
 [数论] hdu 5974 A Simple Math Problem (数论gcd)
混合图欧拉回路
 上下界网络流
 HDU 6623 Minimal Power of Prime（数学）
图的连通度
 最小点权覆盖和最大点权独立集
 最大权闭合子图(最小割,蕴含式最大获利问题)
CodeForces Goodbye 2017
网络流建模汇总

原文地址：https://www.cnblogs.com/dshvv/p/7878811.html