我已将我的应用程序简化为以下情况。我有两种选择框的实现,一种使用硬编码选项,一种使用 ng-options。
如果您选择一个主题,然后返回选择“无”,您会发现第二个示例的工作方式与第一个示例不同。我似乎无法正确配置 ng-options 来获得第一个示例中的行为。所需的行为是在未选择主题时显示 friends
和 friends2
列表中的所有项目。
<!doctype html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.19/angular.min.js"></script>
<script>
angular.module('demoApp', []).controller('DemoController', function($scope) {
$scope.friends = [
{name:'John', phone:'555-1276', topic: 'Baseball History', tags: ['Television, Sports']},
{name:'Mary', phone:'800-BIG-MARY', topic: 'Presidential History', tags: ['Sports, America']},
{name:'Mike', phone:'555-4321', topic: 'TV History', tags: ['History']},
{name:'Adam', phone:'555-5678', topic: 'Texas Trivia', tags: ['Television, Sports, America, Politics']},
{name:'Julie', phone:'555-8765', topic: '', tags: ['Sports']},
{name:'Juliette', phone:'555-5678'},
{name:'Cliff', phone:'555-4444', topic: 'Baseball History', tags: ['Television']},
{name:'Brad', phone:'800-HEYYOOO', topic: 'Presidential History', tags: ['Politics, America']},
{name:'Susanne', phone:'555-5557', topic: 'TV History', tags: ['History']},
{name:'Michelle', phone:'555-7777', topic: 'Texas Trivia', tags: ['Television, Sports, America']},
{name:'Julie', phone:'555-1111', topic: '', tags: ['Sports']},
{name:'Juliette', phone:'555-2222'}
];
$scope.friends2 = [
{name:'John', phone:'555-1276', topic: 'Baseball History', tags: ['Television, Sports']},
{name:'Mary', phone:'800-BIG-MARY', topic: 'Presidential History', tags: ['Sports, America']},
{name:'Mike', phone:'555-4321', topic: 'TV History', tags: ['History']},
{name:'Adam', phone:'555-5678', topic: 'Texas Trivia', tags: ['Television, Sports, America, Politics']},
{name:'Julie', phone:'555-8765', topic: '', tags: ['Sports']},
{name:'Juliette', phone:'555-5678'},
{name:'Cliff', phone:'555-4444', topic: 'Baseball History', tags: ['Television']},
{name:'Brad', phone:'800-HEYYOOO', topic: 'Presidential History', tags: ['Politics, America']},
{name:'Susanne', phone:'555-5557', topic: 'TV History', tags: ['History']},
{name:'Michelle', phone:'555-7777', topic: 'Texas Trivia', tags: ['Television, Sports, America']},
{name:'Julie', phone:'555-1111', topic: '', tags: ['Sports']},
{name:'Juliette', phone:'555-2222'}
];
$scope.options = [
{title: "Baseball History"},
{title: "Presidential History"},
{title: "TV History"},
{title: "Texas Trivia"}
]
});
</script>
</head>
<body ng-app="demoApp" ng-controller="DemoController">
<hr>
Working select boxes, "None" works as expected.
<hr>
<br>by Topic
<select ng-model="search.topic">
<option value="">None</option>
<option value="Baseball History">Baseball History</option>
<option value="Presidential History">Presidential History</option>
<option value="TV History">TV History</option>
<option value="Texas Trivia">Texas Trivia</option>
</select>
Selected: {{search.topic}}
<br>
<table id="searchObjResults">
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr ng-repeat="friendObj in friends | filter:search">
<td>{{friendObj.name}}</td>
<td>{{friendObj.phone}}</td>
</tr>
</table>
<hr>
Working select boxes, "None" does not work as expected. All items are cleared.
<hr>
<br>by Topic
<select ng-model="search2.topic" ng-options="option.title as option.title for option in options">
<option value="">None</option>
</select>
Selected: {{search2.topic}}
<br>
<table id="searchObjResults">
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr ng-repeat="friendObj2 in friends2 | filter:search2">
<td>{{friendObj2.name}}</td>
<td>{{friendObj2.phone}}</td>
</tr>
</table>
</body>
</html>
Plunkr:http://plnkr.co/edit/BCQrDYJoag7Fh0hPtwmk
在这两个示例中,第一个选项元素的值都是空字符串,但它们的行为不同。寻找另一个这样的例子并不容易。
感谢您的任何建议。
最佳答案
As you have not included "None" in the options list,
1) You can either declare "None" in options list
2) you can use ng-repeat for the options. Please see below :
<select ng-model="search2.topic">
<option value="">None</option>
<option ng-repeat="option in options">{{option.title}}</option>
</select>
Here is the plunker
http://plnkr.co/edit/KgTLxjqT8fH9UAco1D4w?p=preview
关于javascript - 使用 ng-repeat 指令过滤结果时,Angular ng-options "None"无法按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25554404/