Angularjs

Question

嗨，我想做一个简单的 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>

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

Answer 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 指令。它们只会显示 select 的值是否等于 ng-show

中的文字

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

Angularjs - 如何做 Select - 选项过滤器

Angularjs - How to do a Select - option filter

html

select

filter