I am attempting to filter a table based on the value of an input box.
I have it currently working on the HTML side, like so...
<tr ng-repeat="person in model.info | filter:inputFilter" ..... >
<td> {{ person.name }} </td>
<td> {{ person.height }} </td>
</tr>
<input class="filterBox" type="text" ng-model="inputFilter">
As said before, it works swell. It filters as I type, and is very quick and snappy.
In an effort to make the code reusable, I'd really like to be able to convert this into a Javascript function, but the syntax is escaping me. Yes, I've read the documents, but am not sure how I could just have it update in real time like it does through the HTML side.
Thanks :D
Austin
Related
I have a simple table row.
The row is generated by below code.
<tr ng-init="cacheChanged">
<td>Expiration Period</td>
<td ng-repeat="system in tableData.regions[0].systems">
<input type="text" ng-model="system.cacheDuration" ng-change="cacheChanged=true">
<span>h</span>
</td>
<td>
<button type="button" ng-click="saveCache()" ng-disabled="!cacheChanged">Save</button>
</td>
</tr>
When any of the four values changed, the save button is supposed to be enabled. However, it is still disabled all the time. Anyone knows why? Thanks in advance!
In your case you should use $parent.cacheChanged instead of cacheChanged variable. As ng-repeat does create child scope for each loop while rendering DOM. In short the cacheChanged variable inside ng-repeat is not same as that of cacheChanged used there on button.
Markup
<td ng-repeat="system in tableData.regions[0].systems">
<input type="text" ng-model="system.cacheDuration" ng-change="$parent.cacheChanged=true">
<span>h</span>
</td>
There is better way to go for it will be using Dot rule while defining ng-model, look at this detailed answer here.
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 .
The form to be validated is master detail i.e. it has two portions. master portion contains two fields while detail portion initially has two rows but they can be increased by pressing a button on DOM. The form looks like the following
The problem is that in detail portion I have to create the inputs using ng-repeat like
<div class="form-group">
<table style="margin-left:10%;">
<tr>
<th>Account id</th>
<th>Amount</th>
</tr>
<tr class="edit-row" ng-repeat ="entry in model.Entries">
<td>
<input type="text" ng-model="model.Entries[$index].AccountId" required name="Entries[{{$index}}].AccountId"/>
</td>
<td>
<input type="text" ng-model="model.Entries[$index].Amount" required name="Entries[{{$index}}].Amount"/>
<span class="field-validation-error text-danger" ng-show="transactionForm['Entries['{{$index}}'].Amount'].$invalid && transactionForm['Entries['{{$index}}'].Amount'].$dirty">
Amount is Required
</span>
</td>
</tr>
</table>
</div>
But the ng-show attribute is not working fine for the detail portion. This is because, I have dots (.) and brackets ([) in the name of input fields. How can I perform validation in such scenario. Someone may argue to change the names of the input but I have to use this convention for input names in the detail portion. In current code, I have used bracket notation in ng-show attribute of Amount field as described in This SO question, but to no avail. you can find complete example at plunker
Can you do something like this?
ng-show="model.Entries[$index].Amount === ''"
Rather than trying to check the form value check the actual model value. This will work assuming you are just checking to make sure there is a value other than the empty string. You will have to make the check more specific to what you are looking for. You can also set the type="number" if you only want to allow the user to enter a numeric value.
AngularJS newbie trying to limit a search filter to one very nested array item. Here's a shot of my output:
<div ng-controller="listController">
<input type="text" ng-model="searchMe" />
<table class="table">
<tr>
<th>Product Name</th>
<th>Color</th>
<th>Size</th>
<th>Features</th>
</tr>
<tr ng-repeat="p in prods | filter:searchMe">
<td>{{p.products.1.ProductName}}</td>
<td>{{p.products.1.Color}}</td>
<td>{{p.products.1.Size}}</td>
<td>
<ul ng-repeat="feats in p.features">
<li>{{feats}}</li>
</ul>
</td>
</tr>
</table>
</div>
Which displays all the items in the list correctly, including the additional features. Now there are at least another dozen items in the products array, including description, price, etc. The issue is if I search something in the box, it searches the entire array. Now I've tried changing the search input to:
<input type="text" ng-model="search.products.1.ProductName" />
<input type="text" ng-model="search.p.products.1.ProductName" />
<input type="text" ng-model="search.ProductName" />
However as soon as I type one character everything disappears. Yes I've also taken the "me" off the search filter (| filter:search). How can I bind the search to a specific item in a nested array? I'll also need to be able to search by features, but I'm hoping by solving this first it'll lead my to the features. Also my content is being pulled in by a json file if that makes a difference. The search features will eventually be checkboxes as well, and not text inputs, but I figure it shouldn't matter, I will still need to target the specific items (name, color, size, etc).
Thoughts/ideas/suggestions?
My solution for the time being is restructuring the json file. Maybe when my knowledge of Angular expands I'll be able to revisit.
I'd like to use an AngularJS filter to search for a piece of text in a table and then use Angular-ui highlight to highlight the text.
I have the following code:
Search field:
<input type="text" ng-model="searchText"/>
Table with ng-repeat and angular-ui highlight
<table ng-repeat="fruit in fruits">
<tr>
<td>{{ fruit.name | highlight:searchText }}</td>
<td>{{ fruit.price }}</td>
</tr>
</table>
But my result looks like this:
I think I should be using ng-bind-html-unsafe, but am not sure of the correct way to implement it. Any ideas?
You can try
<span ng-bind-html-unsafe="fruit.name | highlight:searchText"></span>
I have solved my issue, with help from user sza.
I am using AngularJS 1.2, and need to be using ng-bind-html not ng-bind-html-unsafe. The next step was to include the angular-sanitize.js script. The last step was to include in the directive ngSanitize to app.js.
Source and additional reading here