2016-01-03 72 views
1

http://plnkr.co/edit/knmWulxhKdeQoMVm7u4k?p=preview与NG-选择和NG-重复AngularJS奇怪的行为

<!doctype html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>Example - example-static-select-production</title> 


    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script> 
    <script src="app.js"></script> 



</head> 

<body ng-app="staticSelect"> 

    <select name="quarter" ng-model="Quarter"> 
    <option ng-repeat="v in [1,2,3,4]" ng-selected="v==4">Q{{v}}</option> 
    </select> 

    <select name="quarter" ng-model="Quarter"> 
    <option ng-repeat="v in [1,2,3,4]" value="{{v}}" ng-selected="v==3">Q{{v}}</option> 
    </select> 

</body> 

</html> 

ng-selected似乎只能选择最后一个元素。为什么是这样?

我检查了元素,并且ng-selected标记为true。但是,如果它不是最后一个元素,那么它最初不会被选中。

+0

你想要实现什么? – Sajeetharan

+0

你好,这是我的问题的简化版本。基本上我有一个选择标签的json数组。我想将选项标记初始化为从数据库中检索的JSON。 – Zanko

回答

1

你可以试试这个代码,

<select name="quarter" ng-model="Quarter" ng-options="item as 'Q'+item for item in [1,2,4,3]"> 

在你的控制器,你必须指定 “季”,如:

$scope.Quarter = 3 

这是一个完整的例子:

(function(angular) { 
 
    'use strict'; 
 
angular.module('staticSelect', []) 
 
    .controller('ExampleController', ['$scope', function($scope) { 
 
    $scope.data = { 
 
    singleSelect: null, 
 
    multipleSelect: [], 
 
    option1: 'option-1', 
 
    }; 
 

 
    $scope.Quarter = 3; 
 
    
 
    $scope.forceUnknownOption = function() { 
 
     $scope.data.singleSelect = 'nonsense'; 
 
    }; 
 
}]); 
 
})(window.angular); 
 
<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Example - example-static-select-production</title> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script> 
 
    
 
</head> 
 

 
<body ng-app="staticSelect" ng-controller="ExampleController"> 
 

 
    <select name="quarter" ng-model="Quarter" ng-options="item as 'Q'+item for item in [1,2,3,4]"> 
 
</body>  
 
</html>