Javascript 角度ng选项“；无”；使用ng repeat指令筛选结果时未按预期工作_Javascript_Angularjs

Javascript 角度ng选项“；无”；使用ng repeat指令筛选结果时未按预期工作

javascript angularjs

Javascript 角度ng选项“；无”；使用ng repeat指令筛选结果时未按预期工作,javascript,angularjs,Javascript,Angularjs,我已将我的应用程序简化为以下情况。我有两个选择框的实现，一个带有硬编码选项，另一个使用ng选项如果您选择一个主题，然后返回选择“无”，您将看到第二个示例的工作方式与第一个示例的工作方式不同。我似乎无法正确配置ng选项以获得第一个示例中的行为。所需的行为是在未选择主题时显示朋友和朋友2列表中的所有项目 <!doctype html> <html lang="en"> <head> <script src="//ajax.googleapis.com/aj

我已将我的应用程序简化为以下情况。我有两个选择框的实现，一个带有硬编码选项，另一个使用ng选项

如果您选择一个主题，然后返回选择“无”，您将看到第二个示例的工作方式与第一个示例的工作方式不同。我似乎无法正确配置ng选项以获得第一个示例中的行为。所需的行为是在未选择主题时显示

朋友

和

朋友2

列表中的所有项目

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


角度.module（'demoApp'，[]）.controller（'DemoController'，function（$scope）{
$scope.friends=[
{姓名：'John'，电话：'555-1276'，主题：'棒球历史'，标签：['TV，Sports']}，
{姓名：'Mary'，电话：'800-BIG-Mary'，主题：'总统历史'，标签：['Sports，America']}，
{姓名：'Mike'，电话：'555-4321'，主题：'TV History'，标签：['History']}，
{姓名：'Adam'，电话：'555-5678'，主题：'Texas Trivia'，标签：['TV，Sports，America，Politics']}，
{姓名：'Julie'，电话：'555-8765'，主题：''，标签：['Sports']}，
{姓名：'Juliette'，电话：'555-5678'}，
{姓名：'Cliff'，电话：'555-4444'，主题：'棒球历史'，标签：['TV']}，
{姓名：'Brad'，电话：'800-Heyyoo'，主题：'Presidential History'，标签：['Politics，America']}，
{姓名：'Susanne'，电话：'555-5557'，主题：'TV History'，标签：['History']}，
{姓名：'Michelle'，电话：'555-7777'，主题：'Texas Trivia'，标签：['TV，Sports，America']}，
{姓名：'Julie'，电话：'555-1111'，主题：''，标签：['Sports']}，
{姓名：'Juliette'，电话：'555-2222'}
]; 
$scope.friends2=[
{姓名：'John'，电话：'555-1276'，主题：'棒球历史'，标签：['TV，Sports']}，
{姓名：'Mary'，电话：'800-BIG-Mary'，主题：'总统历史'，标签：['Sports，America']}，
{姓名：'Mike'，电话：'555-4321'，主题：'TV History'，标签：['History']}，
{姓名：'Adam'，电话：'555-5678'，主题：'Texas Trivia'，标签：['TV，Sports，America，Politics']}，
{姓名：'Julie'，电话：'555-8765'，主题：''，标签：['Sports']}，
{姓名：'Juliette'，电话：'555-5678'}，
{姓名：'Cliff'，电话：'555-4444'，主题：'棒球历史'，标签：['TV']}，
{姓名：'Brad'，电话：'800-Heyyoo'，主题：'Presidential History'，标签：['Politics，America']}，
{姓名：'Susanne'，电话：'555-5557'，主题：'TV History'，标签：['History']}，
{姓名：'Michelle'，电话：'555-7777'，主题：'Texas Trivia'，标签：['TV，Sports，America']}，
{姓名：'Julie'，电话：'555-1111'，主题：''，标签：['Sports']}，
{姓名：'Juliette'，电话：'555-2222'}
]; 
$scope.options=[
{标题：“棒球史”}，
{标题：“总统历史”}，
{标题：“电视史”}，
{标题：“德克萨斯州琐事”}
]
});

工作选择框，“无”按预期工作。


按主题
没有一个
棒球史
总统历史
电视史
德克萨斯州的琐事
所选：{search.topic}


名称
电话
{{friendObj.name}
{{friendObj.phone}

使用选择框时，“无”无法按预期工作。所有项目都已清除。


按主题
没有一个
所选：{search2.topic}


名称
电话
{{friendObj2.name}
{{friendObj2.phone}

普朗克：

在这两个示例中，第一个option元素的值都是空字符串，但它们的行为不同。寻找这方面的另一个例子并不容易

谢谢您的建议。

您需要在第41行的选项数组中指定“无”项，并为每个选项指定一个值：

$scope.options = [
      {title: "None",value: ""},
      {title: "Baseball History", value: "Baseball History"},
      {title: "Presidential History",value: "Presidential History"},
      {title: "TV History",value: "TV History"},
      {title: "Texas Trivia",value: "Texas Trivia"}
     ]

然后将第112行上的更改为：

<select ng-model="search2.topic" ng-options="option.value as option.title for option in options">

    </select>

请注意，我是如何删除内联“none”选项标记并将其添加到上面的数组中，并使用适当的值“”使过滤器工作的。

还要注意ng options属性中option.value的使用。

您需要在第41行的选项数组中指定'none'条目，并为每个选项指定一个值：

$scope.options = [
      {title: "None",value: ""},
      {title: "Baseball History", value: "Baseball History"},
      {title: "Presidential History",value: "Presidential History"},
      {title: "TV History",value: "TV History"},
      {title: "Texas Trivia",value: "Texas Trivia"}
     ]

然后将第112行上的更改为：

<select ng-model="search2.topic" ng-options="option.value as option.title for option in options">

    </select>

请注意，我是如何删除内联“none”选项标记并将其添加到上面的数组中，并使用适当的值“”使过滤器工作的。

还要注意ng options属性中option.value的使用。

您需要在第41行的选项数组中指定'none'条目，并为每个选项指定一个值：

$scope.options = [
      {title: "None",value: ""},
      {title: "Baseball History", value: "Baseball History"},
      {title: "Presidential History",value: "Presidential History"},
      {title: "TV History",value: "TV History"},
      {title: "Texas Trivia",value: "Texas Trivia"}
     ]

然后将第112行上的更改为：

<select ng-model="search2.topic" ng-options="option.value as option.title for option in options">

    </select>

请注意，我是如何删除内联“none”选项标记并将其添加到上面的数组中，并使用适当的值“”使过滤器工作的。

还要注意ng options属性中option.value的使用。

您需要在第41行的选项数组中指定'none'条目，并为每个选项指定一个值：

$scope.options = [
      {title: "None",value: ""},
      {title: "Baseball History", value: "Baseball History"},
      {title: "Presidential History",value: "Presidential History"},
      {title: "TV History",value: "TV History"},
      {title: "Texas Trivia",value: "Texas Trivia"}
     ]

然后将第112行上的更改为：

<select ng-model="search2.topic" ng-options="option.value as option.title for option in options">

    </select>

请注意，我是如何删除内联“none”选项标记并将其添加到上面的数组中，并使用适当的值“”使过滤器工作的。

还要注意在ng选项属性中使用option.value。

第二个示例使用

ngOptions

或者，可以将值设置为空字符串的单个硬编码元素嵌套到元素中。然后，该元素将表示null或“未选择”选项

因此它的值不是空字符串，而是

null

。因此，它与任何没有主题的朋友都不匹配，因为“没有主题”表示为空字符串，而不是

null

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

您可以将“无”选项添加到

选项中，或者将“无主题”表示为null
第二个示例使用ngOptions

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

（可选）单个硬编码元素，其值设置为空