• 关于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.

  • 相关阅读:
    浏览器兼容之background-size
    bootstrap学习之全局样式
    bootstrap dropdown的点击变为:hover 后自动下拉
    看完了《缔造企鹅》
    2015年阅读记录
    博士论文致谢 作一下
    如何将Visio转化为EPS? For Latex
    《乌合之众》 古斯塔夫·勒庞
    笑傲江湖
    社会化推荐(一) 理论和实践 对科学的思考
  • 原文地址:https://www.cnblogs.com/VitoYi/p/7534471.html
Copyright © 2020-2023  润新知