• 关于AngularJS的ng-options指令


    定义和用法

    ng-options 可以使数组对象来生成一个<select>中的<option>列表。
    当select中一个选项被选择,该选项将会被绑定到ng-model。
    除了ng-options 指令外,还可以使用 ng-repeat 来替代。

    使用情景

    ng-options 如何遍历对象我不清楚,主要还是作用与数组。
    后台将一个List<DTO对象>以json的形式传到前台,通过回调函数得到的就是一个数组对象。这时候 ng-options 就派上用场了。

    具体使用

    html

    <div ng-app="myApp" ng-controller="myCtrl">
    
    <select ng-model="selectedName" ng-options="item.code as item.message for item in names" ng-change="change()">
    	<option value="">请选择</option>
    </select>
    
    </div>
    

    注:<select>是可以有默认值的,如<option value="">请选择</option>, 但前提是value必须等于"",不可以有任何值。

    controller

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.names = [
    		{message:"Emil", code:1}, 
    		{message:"Tobias", code:2}, 
    		{message:"Linus", code:3}
    	];
    	
    	$scope.change = function(){
    	    console.log("value="+$scope.selectedName);
    	}
    });
    

    详解

    首先,ng-options="item.code as item.message for item in names"
    表示遍历$scope.names数组,得到每个item对象;
    然后,item.code作为option的value,item.message作为option的text.

    而ng-model, 其实就是option的value.

  • 相关阅读:
    MVC小系列(十五)【MVC+ZTree实现对树的CURD及拖拽操作】
    WCF身份验证之用户名密码认证
    sql 优化建议
    Redis key 设计技巧
    Redis配置文件详解
    Nlog配置文件
    Windown安装Mysql安装图解
    CentOS 7 命令备忘录
    WPF自定义ListBox样式
    WPF自定义圆形按钮样式资源文件
  • 原文地址:https://www.cnblogs.com/VitoYi/p/7534471.html
Copyright © 2020-2023  润新知