remove element from ngrepeat using filter - javascript

How can I mark an element in an array as deleted and hide it by using a filter? I tried this but it doesn't work.
<li ng-repeat="user in preferences.users | filter:user.removed">
<button ng-click="user.removed=1">delete</button>
{{user.id}}
</li>

Don't use user in your filter, and change to bools:
<div ng-repeat="user in users | filter:{removed:false}">
<button ng-click="user.removed=true">remove</button>
</div>
edit: here's a working fiddle.

Try setting user.removed to true instead of 1.

Related

How to reset the value of $index in ng-repeat nested loops?

I have this code and not sure is it right or wrong the way to implement it. But definitely so far not working in my view.
<div ng-repeat="data in DataObject">
<ul style="list-style-type:decimal !important;">
<li ng-repeat="(indexX,answer) in bkm.content_detail.question_data.question_content[0].question_answer[0].answer_text track by $index">
{{indexX+1}} - {{answer | joinBy : " / "}}
</li>
<div ng-init="indexX=0"></div>
</ul>
</div>
Well, I tried to make value of indexX=0 at ng-init="indexX=0". Is it true the way I've done it?
The purpose I need to reset the value of indexX is because of nested loop of ng-repeat at the outer div.
You can add a directive to your ng-repeat loop that can utilize the scope.$last parameter to reset your index on the last element.
Example:
https://stackoverflow.com/a/13472605/6452040

hide div based on textfield input with angularjs

I need to hide a div(class "card") until the user enters text into the textfield.
I'm using angularJS for my app. I guess i have to use ng-showbut how can I get this to work? I appreciate your help.
This is my code:
<input type="text" ng-model="searchBox" class="search1" placeholder="Suchen...">
<div ng-repeat="item in posts | filter:searchBox" class="card">
<h3 class="w">{{item.storeName}}</h3>
[...]
You can simply set ng-show equal to the model value. When it's empty ng-show will evaluate to false and hide the div. When the input has a value ng-show will evaluate to true and show the div.
<div ng-repeat="item in posts | filter:searchBox" class="card" ng-show="searchBox">
add ng-show or ng-if to the element you want to show after value is entered
<div ng-repeat="item in posts | filter:searchBox" class="card" ng-if="searchBox">
or you can wrap this div with another div
<div ng-if="searchBox">
<div ng-repeat="item in posts | filter:searchBox" class="card">
but you do not have to do this... given that the filter will give results only if there is any value matching as per the searchBox, hence if there are not values, ng-repeat will not create any element

AngularJS expression checking child properties in a list

How do I write an angular expression that checks each child item in a list and returns true if any child has a certain property value?
I have a chart legend being generated by an ng-repeat expression. Now I want to show the wrapping element only if any of the child items in the list has the property "datavisible" set to true.
Currently I have a $scope variable "anydatavisible" being set to true if any of the data series is activated so I can use that in an expression.
<div class="chart-legend" ng-show="anydatavisible">
<div ng-repeat="item in model.Accounts track by item.Id" ng-if="item.datavisible">
{{item.Name}}
</div>
</div>
I was wondering I can get the same result by using an expression that checks each child so I don't have the need for the variable "$scope.anydatavisible".
I'm looking for something like this:
<div class="chart-legend" ng-show="any(model.Accounts).datavisible">
<div ng-repeat="item in model.Accounts track by item.Id" ng-if="item.datavisible">
{{item.Name}}
</div>
</div>
Try this:
<div class="chart-legend" ng-show="(model.Accounts | filter:{datavisible:true}).length > 0">

AgularJS ng-repeat without repeating parent elements

What I bassically want to do is the following:
I have two columns and I want to fill them with data with a single ng-repeat but without repeating the columns themselves. I think that it may not be possilbe, but I had to try :)
->Start ng-repeat="item in items"
<div exclude-from-repeat class="col1"> -> append {{item.Name}} here </div>
<div exclude-from-repeat class="col2"> -> append {{item.Description}} here </div>
->End ng-repeat
<div ng-repeat="item in items" class="col{{$index}}">{{item}}</div>
I know it's not what you asked for, but it does assign a different class to each column. The $index in ng-repeat goes from 0 to items.length-1
You could also try to use ng-repeat-start and ng-repeat-end to have more flexibility. But in general, I do not think it is possible to exclude the parent element from the ng-repeat loop.

Get clicked object value with AngularJS

I'm trying to rewrite a live search feature using AngularJS, but can't find how I can grab the currently clicked item in the list. See below:
<div id="searchResults" ng-show="speaker.list.length > 0">
<ul ng-repeat="person in speaker.list">
<li ng-click="speaker.updateFields()">{{person.name}}</li>
</ul>
</div>
In my speaker.updateFields() method, how do I reference person.name? Is there a different way this should be done?
Thanks.
Pass it in!
<li ng-click="speaker.updateFields(person.name)">{{person.name}}</li>
And the JS
$scope.updateField = function(name) {
//console.log(name)
}
When you use ng-repeat each item is assigned an index value as well.
<div ng-repeat='person in persons'>
{{person.$index}}
</div>

Categories