Angularjs - How to do a Select - option filter

Question

Hi I want to do a simple angularjs filter so I have this:

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

and the test script (doesn't works... Jquery conflict)

 <script type="text/javascript">

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

 </script>

The question is: there is another way to show and hide the selected input? Can I do it on the server-side?

did you look at Angular docs ng-ptions? [docs.angularjs.org/api/ng/directive/ngOptions] — Jax
– Jax, Commented Apr 17, 2015 at 13:28
in your if statement, you are comparing value with codigo. But there is nothing like that. It should be code, I suppose. — Prerak Sola
– Prerak Sola, Commented Apr 17, 2015 at 13:29
haha yeah @PrerakSola, I forgot to change it posting it here. — Jhony Blaze
– Jhony Blaze, Commented Apr 17, 2015 at 13:35

scartag · Accepted Answer · 2015-04-17 13:32:24Z

With AngularJS you can use NgShow to show items optionally.

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

I've added an ng-model to the select and an ng-show directive to each of the input fields. they will only show if the value of the select is equal to the literal in the ng-show

This assumes that angular is already referenced in the page.

Collectives™ on Stack Overflow

Angularjs - How to do a Select - option filter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related