Show and hide div after filter with Angularjs

Asked

Viewed 282 times

0

Hello.

I have the following filter:

<div ng-repeat="user in users|filter:search| filter:selectedCategories| filter:selectedType| filter:selectedDate| orderBy:'+id':true| limitTo: 10">

You want to put the "Last users" text when the page is loaded and I want it not to appear when the user uses the filter.

Any idea?

Edit:

<div ng-app="testeApp">
      <script>
            var myApp = angular.module('testeApp',[]);
            myApp.controller('testeController', function($scope){
                  $scope.users=[
                        {id:1, name:"Fulano", startdate:'janeiro', categories:'normal', type:'xpto'},
                  ];
            });
      </script>
</div>


<form>
  <input type="text" ng-model="search" class="text-input" placeholder="Nome, Cidade, País, Continente" autofocus />
<select ng-model="selectedCategories">
    <option value="">-- Categoria --</option>
    <option value='normal'>Normal</option>
</select>
  <select class="type" ng-model="selectedType">
    <option value="">-- Tipo --</option>
    <option value='xpto'>xpto</option>
</select>

  <select class="data" ng-model="selectedDate">
    <option value="">-- Data --</option>
    <option value="janeiro">janeiro</option>
    <option value="fevereiro">fevereiro</option>
  </select>
</form>

<h3 ng-if="!search">Últimos usuários adicionados</h3>
angularjs
  • 1

    <span ng-if="!!search">Últimos usuários</span> ?

  • thanks for the answer, it worked like this: <span ng-if="!search">Últimos usuários</span> Now, how do I make the same thing happen to other filters? I tried using OR <span ng-if="!search || !selectedCategories || !selectedType || !selectedDate">Últimos usuários</span> and it didn’t work

  • I will confess that it was in the kick (calculated, but kick. = ) ). That’s because I assumed that search was just an object. If selectedCategories, for example, it is a registered object (an angular filter) that mechanical might not work. You could post a little more of your code?

  • 1

    @carlostiago You can [Dit] your publication and add this type of information to it. In addition to being more readable and better formatted, comments serve another purpose.

1 answer

1


Use a alias for the result of your filter chain:

<div ng-repeat="user in users|filter:search|filter:selectedCategories as filteredUsers">

Angular copies the final value of the filtered collection to the $scope. You can then compare the original with the final:

<span ng-if="users.length == filteredUsers.length">Últimos usuários</span>

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.