ng 动态的生成option。

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/web-fusheng/p/6953682.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用Angular框架的示例，展示了如何通过ngOptions指令来动态生成下拉选择框的选项。具体实现了从一个对象数组中加载数据并展示在HTML select元素上，同时通过$scope.$watch监控模型数据变化。

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>