zoukankan      html  css  js  c++  java
  • AngularJS Select(选择框)

    使用 ng-options 创建选择框

    <div ng-app="myApp" ng-controller="myCtrl">
    <select ng-model="selectedName" ng-options="x for x in names">
    </select>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.names = ["Google", "Runoob", "Taobao"];
    });
    </script>
    <p>该实例演示了 ng-options 指令的使用。</p>

    ng-options 选择的是对象操作灵活与 ng-repeat选择的是字符串

    <div ng-app="myApp" ng-controller="myCtrl">
    <select>
    <option ng-repeat="x in names">{{x}}</option>
    </select>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.names = ["Google", "Runoob", "Taobao"];
    });
    </script>
    <p>该实例演示了使用 ng-repeat 指令来创建下拉列表。</p>
    <div ng-app="myApp" ng-controller="myCtrl">
    <p>选择网站:</p>
    <select ng-model="selectedSite" ng-options="x.site for x in sites">
    </select>
    <h1>你选择的是: {{selectedSite.site}}</h1>
    <p>网址为: {{selectedSite.url}}</p>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
       $scope.sites = [
       {site : "Google", url : "http://www.google.com"},
       {site : "Runoob", url : "http://www.runoob.com"},
       {site : "Taobao", url : "http://www.taobao.com"}
    ];
    });
    </script>
    <p>该实例演示了使用 ng-option指令来创建下拉列表,选中的值是一个字符串。</p>


    数据源为对象

     使用对象作为数据源, x 为键(key), y 为值(value):

    你选择的值为在 key-value 对中的 value

    value 在 key-value 对中也可以是个对象:

     div ng-app="myApp" ng-controller="myCtrl">


    <p>选择一辆车:</p>

    <select ng-model="selectedCar" ng-options="x for (x, y) in cars">
    </select>

    <h1>你选择的是: {{selectedCar.brand}}</h1>
    <h2>模型: {{selectedCar.model}}</h2>
    <h3>颜色: {{selectedCar.color}}</h3>

    <p>注意选中的值是一个对象。</p>
    </div>

    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.cars = {
            car01 : {brand : "Ford", model : "Mustang", color : "red"},
            car02 : {brand : "Fiat", model : "500", color : "white"},
            car03 : {brand : "Volvo", model : "XC90", color : "black"}
        }
    });
    </script>
    <div ng-app="myApp" ng-controller="myCtrl">

    <p>选择一辆车:</p>

    <select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
    </select>

    <h1>你选择的是: {{selectedCar.brand}}</h1>
    <h2>模型: {{selectedCar.model}}</h2>
    <h3>颜色: {{selectedCar.color}}</h3>

    <p>下拉列表中的选项也可以是对象的属性。</p>

    </div>

    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.cars = {
            car01 : {brand : "Ford", model : "Mustang", color : "red"},
            car02 : {brand : "Fiat", model : "500", color : "white"},
            car03 : {brand : "Volvo", model : "XC90", color : "black"}
        }
    });

    </script> 

  • 相关阅读:
    学号20145220《信息安全系统设计基础》第10周学习总结
    补发周四的博客。对之前的知识复习了一遍,因为要闭卷考试。
    jsp中文乱码
    redis做成windows服务
    poi导出excel打开文件时部分内容有问题
    mysql删除数据表时:Cannot delete or update a parent row: a foreign key constraint fails
    Oracle使用foreach批量操作数据
    Oracle数据库clob类型转String类型
    MAVEN配置多个仓库
    idea中maven项目明明有jar包还是爆红
  • 原文地址:https://www.cnblogs.com/cf924823/p/5231126.html
Copyright © 2011-2022 走看看