zoukankan      html  css  js  c++  java
  • ng 动态的生成option。

    ngOptions:根据集合,动态的生成option。

    select ng-options="color.name for color in colorList"

    注意跟ng-repeat 的区别:

    ng-repeat="obj in cart track by $index"

    结果:

    代码:

    <!DOCTYPE html>
    <html ng-app="myApp">
    <head lang="en">
      <meta charset="UTF-8">
      <script src="js/angular.js"></script>
      <title></title>
    </head>
    <body>
    <div ng-controller="myCtrl">
      <select
        ng-model="color"
        ng-options="color.name for color in colorList">
    
      </select>
    </div>
    <script>
      var app = angular.module('myApp', ['ng']);
      app.controller('myCtrl', function ($scope) {
        console.log('myCtrl  func is called');
    
        //构造对象数组,是要数组中的数据动态的显示在select
        $scope.colorList = [
          {name:'红色',value:'r'},
          {name:'绿色',value:'g'},
          {name:'蓝色',value:'b'}
        ];
        //指定在下拉菜单中是下标为1的默认被选中
        $scope.color = $scope.colorList[1];
        //监听模型数据的变化
        $scope.$watch('color', function () {
          console.log($scope.color);
        })
      })
    </script>
    </body>
    </html>
  • 相关阅读:
    织梦开发——相关阅读likeart应用
    织梦标签教程
    织梦专题调用代码
    HIT 2543 Stone IV
    POJ 3680 Intervals
    HIT 2739 The Chinese Postman Problem
    POJ 1273 Drainage Ditches
    POJ 2455 Secret Milking Machine
    SPOJ 371 Boxes
    HIT 2715 Matrix3
  • 原文地址:https://www.cnblogs.com/web-fusheng/p/6953682.html
Copyright © 2011-2022 走看看