关闭

angularjs Select下拉选择宽

标签: angularjsselect
523人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE html>
<html>
<head>
    <title>angularjs下拉选择框</title>
    <meta charset="utf-8" />
    <script src="angular/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <select ng-model="mySelect" ng-options="x.site for x in sites"></select>
        <h1>{{mySelect.site}}</h1>
        <p>{{mySelect.url}}</p>
    </div>
    <script>
        angular.module("myApp",[]).controller("myCtrl",function($scope){
            $scope.sites = [
            {site : "google", url:"http://www.baidu.com"},
            {site : "Runoob", url : "http://www.runoob.com"},
            {site : "Taobao", url : "http://www.taobao.com"}
            ];
        });
    </script>
</body>

</html>

ng-options中的x就是出现在下拉框中的选项,也是sites数组中的某一项。要出现该项中的哪一种属性,我们都可以很轻松的定制。而ng-model的值就是选中的某一个对象的值。可以很方便的操作其属性!

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:9807次
    • 积分:693
    • 等级:
    • 排名:千里之外
    • 原创:62篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条