Stop Angular inserting [object Object] into my text input

Question

I am using Angular to filter an array of data for a table. The filter works on the table but when I select one of the select options it inserts [object Object] into my text input. How do I stop this?

<div class='table-filters'>

  <div class='row'>
    <label>Search</label>
    <input ng-model="query"   name='search' >
  </div>

  <div class='row'>
    <label for='category'>Category</label>
    <select ng-model="query.cat">
      <option value="">Any</option>
      <option value="VOWEL">Vowels</option>
      <option value="CONSONANT">Consonants</option>
      <option value="NUMBER">Digits</option>
      <option value="SIGN: DEP">Dependent Signs</option>
      <option value="SIGN: IND">Independent Signs</option>
    </select>
  </div>

  <div class='row'>
    <label for='matched-rows'>Matched Characters</label>
    <span id='matched-rows'>{{(rows|filter:query).length}}</span<
  </div>

</div>

Matt Herbstritt · Accepted Answer · 2014-12-18 00:06:04Z

2

I seem to have found a solution form this plunker http://plnkr.co/edit/XklvXtc1AZpndjLvXrh8?p=preview;

<div class='row'>
 <label>Search</label>
 <input ng-model="query[queryBy]"   name='search' >
</div>

js file:

demo.controller('demoController', function($scope){

    $scope.rows = getRows();
    $scope.query = {};
    $scope.queryBy = '$';

});

I should have put my js file in the question, I know. Apologies for the poorly written question. Thank you.

edited Dec 18, 2014 at 0:06

answered Sep 26, 2014 at 7:02

Matt Herbstritt

4,8825 gold badges29 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrej Kaurin · Accepted Answer · 2014-09-26 06:49:41Z

0

query is Object and its toString() implementation returns [object Object].

Use query.cat as ng-model for input.

<input ng-model="query.cat"   name='search' >

answered Sep 26, 2014 at 6:49

Andrej Kaurin

11.6k14 gold badges48 silver badges55 bronze badges

2 Comments

Matt Herbstritt Over a year ago

but won't that restrict the search to just .cat property. I won't to be able to filter the array against all properties not just the .cat.

Andrej Kaurin Over a year ago

But in that case you don't need input. Just use your query object and do filtering. From what I see you will have to define custom filtering method.

Collectives™ on Stack Overflow

Stop Angular inserting [object Object] into my text input

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related