Angularjs - 如何进行选择 - 选项过滤器答案

【问题标题】：Angularjs - How to do a Select - option filterAngularjs - 如何进行选择 - 选项过滤器
【发布时间】：2015-06-24 09:11:05
【问题描述】：

您好，我想做一个简单的 angularjs 过滤器，所以我有这个：

      <input type="text" id="name" style="display:block" class="form-control" placeholder="By name" ng-model="search.student_name">
      <input type="text" id="code" style="display:none" class="form-control" placeholder="By code" ng-model="search.student_code">
      <input type="text" id="room" style="display:none" class="form-control" placeholder="By room" ng-model="search.student_room">
      <select name="filter" id="filter">
        <option value="name">Name</option>
        <option value="code">Code</option>
        <option value="room">Room</option>
      </select>

和测试脚本（不起作用... Jquery 冲突）

 <script type="text/javascript">

  if(document.getElementbyId('filter').value === 'code'){
    document.getElementbyId('name').style.display="none";
    document.getElementbyId('code').style.display="block";
  };

 </script>

问题是：还有另一种显示和隐藏所选输入的方法吗？我可以在服务器端做吗？

【问题讨论】：

你看过 Angular 文档 ng-ptions 吗？ [docs.angularjs.org/api/ng/directive/ngOptions]
在您的if 语句中，您将价值与codigo 进行比较。但没有这样的。我想应该是code。
哈哈是的@PrerakSola，我忘了把它贴在这里了。
@Jax700303 我会检查的

标签： html angularjs select filter

【解决方案1】：

使用 AngularJS，您可以使用 NgShow 来选择性地显示项目。

<div ng-app>

<input type="text" id="name" style="display:block" class="form-control" placeholder="By name" ng-model="search.student_name" ng-show="filter =='name'">
      <input type="text" id="code" style="display:none" class="form-control" placeholder="By code" ng-model="search.student_code" ng-show="filter =='code'">
      <input type="text" id="room" style="display:none" class="form-control" placeholder="By room" ng-model="search.student_room" ng-show="filter =='room'">
      <select name="filter" id="filter" ng-model="filter">
        <option value="name">Name</option>
        <option value="code">Code</option>
        <option value="room">Room</option>
      </select>

</div>

我在 select 中添加了 ng-model，在每个输入字段中添加了 ng-show 指令。它们只会显示选择的值是否等于 ng-show 中的文字

这假定页面中已经引用了 angular。

【讨论】：