angularjs select

最新推荐文章于 2024-11-25 06:08:04 发布

Marktubbu

最新推荐文章于 2024-11-25 06:08:04 发布

阅读量324

点赞数 1

CC 4.0 BY-SA版权

分类专栏： angularjs 文章标签： angularjs select

本文链接：https://blog.youkuaiyun.com/Sensation_cyq/article/details/52925696

angularjs 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了在AngularJS中使用ng-options指令填充下拉列表时遇到的问题，特别是当ng-model与ng-options顺序不当导致首个选项无法正确显示的情况。

出现问题：当ng-model 和ng-options顺序相反时数据第一个数据没法显示保持顺序

<!DOCTYPE html>

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

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

<select ng-model="selectedName" ng-options="x for x in names">
</select>
<select ng-click="change()" ng-model="_selectedName" ng-options="z for z in _names ">
</select>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $scope._names = ["Emil", "Tobias", "Linus",'s','aaa'];
    $scope.selectedName='Emil';
    $scope._selectedName='s';

$scope.change=function(){
    $scope.names =[]; //["Emil", "Tobias", "Linus",'es'];
   $scope.selectedName='es';
}
});
</script>

<p>This example shows how to fill a dropdown list using the ng-options directive.</p>

</body>
</html>