javascript - 使用 ng-repeat 指令过滤结果时,Angular ng-options "None"无法按预期工作

标签 javascript angularjs

我已将我的应用程序简化为以下情况。我有两种选择框的实现,一种使用硬编码选项,一种使用 ng-options。

如果您选择一个主题,然后返回选择“无”,您会发现第二个示例的工作方式与第一个示例不同。我似乎无法正确配置 ng-options 来获得第一个示例中的行为。所需的行为是在未选择主题时显示 friendsfriends2 列表中的所有项目。

<!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/

相关文章:

javascript - Highcharts - Highstock "inputEditDataFormat"中断输入

javascript - jquery 在鼠标悬停/移出时出现奇怪的闪烁

angularjs - 在模板AngularJS中调用模板

angularjs - 单击链接时强制重新加载路线/状态

javascript - 使用 angularjs 保存 gridster 布局

javascript - 如何在 java 和 node.js 应用程序之间共享动态属性

javascript - Toggle 不使用新浏览器

javascript - 如何使用 express.js 在 Node.js 中获取原始 HTTP header 字符串

javascript - 如果它们的 id 匹配,如何将 div 附加到上一个 div (ANGULAR JS)

javascript - Angular JS : processing promises in order (without chaining)