I have an input of which the value should be used as a filter query:
<input type="text" ng-model="query" placeholder="Movie title">
and a repeat directive with a filter on a property of the repeated elements:
<tr ng-repeat="movie in movies | filter:{title: query}">
When I enter a value into the text box the results are filtered. When I delete the input value all movies are shown. So far so good. But when the page (or view) is loaded the first time the filter returns no elements and the table is empty. It seems to me that the filter either isn't properly called or with a wrong value. Any advice would be appreciated.
try this
<tr ng-repeat="movie in movies | filter:{title: query||'' }">
I think it is because query is undefined in pageload
Related
Im comparing two object arrays and displaying them with those that have the same object checkbox checked. I now want to sort the list the with checkbox check to be first as a default state.
I also want to sort by clicking the header to sort by ascending order .
<div>header</div>
<div class="search" ng-repeat="items in products ">
<label >{{item.name}}</label>
<input type="checkbox" ng-model="item.checked"
ng-click="checked(item,productlist)"
ng-checked=" checked(item,productlist)">
</div>
I tried using orderBy:[‘-checked’,’item’]: true to sort the checked ones on top but its not working. Any ideas
A few problems here...
You have ng-repeat="items in products", but then you refer to item instead of items within this scope.
You have this checked() method that you're passing to ng-click and ng-checked. What exactly is this doing? You should never be using ng-checked in conjunction with ng-model - https://docs.angularjs.org/api/ng/directive/ngChecked
By passing '-checked' to orderBy, items will be ordered by their checked value in reverse, i.e. they will be ordered false first, true last. Then you're passing true as the reverse parameter to orderBy, so the list will be reversed again. You're reversing the ordering twice unnecessarily - https://docs.angularjs.org/api/ng/filter/orderBy
This might work better...
<div>header</div>
<div class="search" ng-repeat="item in products | orderBy: 'checked'">
<label>{{item.name}}</label>
<input type="checkbox" ng-model="item.checked">
</div>
In angularjs I am getting a json array as input that has binary data (true/false). The same data I want to show as text in my "ng-model" drop down select.
My input
$scope.string = [
{"_attributes":{"name":"password"},"_text":"password"},
{"_attributes":{"name":"url"},"_text":"mushmatch"},
{"_attributes":{"name":"comments"},"_text":"comments"},
{"_attributes":{"name":"check"},"_text":true},
{"_attributes":{"name":"value"},"_text":123}
]
My HTML code,
<span>Check1: <input type="checkbox"
ng-repeat="x in string | filter : 'check'"
ng-model="x._text"/></span>
<br>
<span>Check2: <input type="input"
ng-repeat="x in string | filter : 'check'"
ng-model="x._text"/></span>
<br>
<span>Check3:<select ng-repeat="x in string | filter : 'check'" ng-model="x._text" ng-options="x for x in ['true','false']">
</select></span>
The Check1 and Check2 are showing properly but Check3 is not showing initial value as selected. It works when I select from drop down but the requirement to show the present value first , then option to change.
Also I want to know if it is possible to show True/False rather than true/false (in initcap format).
Please let me know how to achieve this. I have created below plunkr also.
Plunkr
change your select element ng-options to boolean true and false
<span>Check3:<select ng-repeat="x in string | filter : 'check'" ng-model="x._text" ng-options="x for x in [true,false]">
I have two array objects user and test. I am applying ng-repeat on the test and also put search filter it works for test object but not for the user object.
My code is
<label>Search</label>
<input ng-model="searchTest" type="text">
<div ng-repeat="t in list = (test | toArray | filter:searchTest | limitTo: maxLimit )">
<td ng-bind="user[t.candidate].name"></td>
<td ng-bind="user[t.candidate].place"></td>
<td ng-bind="t.name"></td>
I'm unable to search the test using candidate name and place.
Also, perhaps not related to the question directly, but it looks like your code has a inside a then 's - which is not good html. If you're going to do something like that, put the ng-repeat on a .
I have a ng-repeat with filters put as shown below before. For some reason it didnt work in the web server and i think its because of duplicate items not allowed in browser DOM so i had to put "track by item.id". Please see the code below.
<div ng-repeat="item in items | filter:search:date | filter:filterFrontPage track by item.id">
The only issue with above code is that items are not loaded by having "filterFrontPage" filter as well which filters a boolean value from an item. The whole thing works fine when i have it changed to the following:
<div ng-repeat="item in items | filter:search:date track by item.id">
Thus, using the above, how would i add one more filter to filter a boolean value in a variable. I cant seems to get this working by using "filter:search:date:{isActive:true}". Please let me know as to what can be done to get this working.
Update 1:
I have removed "date" as i used it long ago. "search" is for the following and that works fine.
<input class="form-control" type="text" placeholder="Search posts" ng-model="search.$" />
Ideally filterFrontPage is written to filter items by isActive variable true/false;
I think you need to use parentheses around the filtered collection, i.e.:
<div ng-repeat="item in (items | filter:search:date) track by item.id">
So i need to know the extras of a car than a user wants to include in his preferences.
I'm trying to create input checkboxes from an array obtained by an ajax request and generate the inputs by ng-repeat. The major objective is to know the checkboxes selected by the user. I'd like that my approach to be create an auxiliar array which contains the selected ones, but i don't know how to set a unique ng-model to every item in the ng-repeat iteration so i can know the list of selected items. I guess there is something left in my knowlege of angular. Here is what i have for now..
In the controller...
$http.get('/ajax/ajax_get_extras/'+$scope.car.version+'/false').success(function(data) {
$scope.extras = data;
});
$scope.addExtra = function(){ // ... manage the auxiliar array }
In the html ...
<div ng-controller="Controller">
<form novalidate class="simple-form">
<span ng-repeat="extra in extras">
<input type="checkbox" ng-model="extra.id" ng-change="addExtra()" name="extra_{{extra.id}}" >{{extra.name}} - <strong>{{extra.real_price | onlynumber | currency}}</strong>
</span>
</form>
</div>
And i'm stuck since the extra.id doesnt transform to the real extra.id and stays as a string "extra.id" >_<
I tried extra_{{extra.id}}, extra.id, {{extra.id}}, $index as posibles ng-model and none works.
In AngularJS 1.1.5 there is "track by" that you can use in ngRepeat.
So you can:
<input type="checkbox" ng-repeat="e in extra track by $index" ng-model="extra[$index]">
Here is a example: http://plnkr.co/edit/6lNo6R5EPsNGHUU6ufTE?p=preview