Search in Columns

[Shiva Rowshan rad]

Hi everyone

I have a Json Data which I showed in rows with 2 columns. I put a search box to show the search results by filter . but it does not work correctly .

Sometimes it shows both data and its next index , sometimes it shows the data in both columns of a row and sometimes it shows nothing at all.

 How should I make it correct ?

<input type="text" ng-model="search" />

<div class="row" ng-repeat="x in books | filter:search" ng-if="$index%2==0">

<div class="col" > {{x.name}}  , {{x.type}} </div>

<div class="col" > {{books [$index+1].name}}  , {{books [$index+1].type}} </div>

</div>

[Zlatko Đurić]

On Saturday, June 25, 2016 at 9:08:30 PM UTC+2, Shiva Rowshan rad wrote:

Hi everyone

I have a Json Data which I showed in rows with 2 columns. I put a search box to show the search results by filter . but it does not work correctly .

Sometimes it shows both data and its next index , sometimes it shows the data in both columns of a row and sometimes it shows nothing at all.

 How should I make it correct ?

So two things to note here:

1. I don't know what your problem exactly is - perhaps you're matching stuff from "book.type", "book.author" or whatever else property, not just name.

If you want to limit the search, just limit it to your name property directly:

      

    <input ng-model="search.name"></label><br>

    <tr ng-repeat="item in items | filter:search">

        {{ item.name }} - {{ item.type }}
    </tr>

2. Layout - you have a weird thing there with ng-if:

     ng-if="$index%2==0"

That would limit you to only show every second row of the array (filtered or full, regardless). Why is that? Are you trying to lay the data out in two columns?

Why not simply use some simple grid?

Like: 

    <div class="results grid">

      <div class="col-1-2" ng-repeat="item in items">

        <span>{{ item.name }}, {{ item.type }}</span>

      </div>

    </div>

See this plunkr: http://plnkr.co/edit/7jDQfD3OA9QkP1aYoM0L

[Shiva Rowshan rad]

Thanks , I used col-1-2 class but it only shows one column in grid :( I cant understand why this happens.

[Shiva Rowshan rad]

By the way I'm using angularjs in Ionic Framework for building a mobile app using Phonegap. 

[Zlatko Đurić]

col-1-2 is just from my plunker, my sample. Pretty sure Ionic has some sort of a grid too, you'll have to read the docs about it.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/7JhHnjSm6SA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Shiva Rowshan rad]

yes Ionic has row and col classes for grid and i used in my code.

[Zlatko Đurić]

Well then maybe stackoverflow or some ionic forum might be good next steps, if you can't find the issue.

On Monday, 27 June 2016, Shiva Rowshan rad <shiva...@gmail.com> wrote:

yes Ionic has row and col classes for grid and i used in my code.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/7JhHnjSm6SA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--
Zlatko