Develop Reference

Angular.js ng-repeat array shows as json

I have an issue where I'm trying to display an array in Angularjs using ng-repeat but its showing the entire json array and not only the text inside.
This is my array
$scope.problems = [
{
problem: "problem1",
works: [
"a0",
"a9"
]
}
]
And this is where I want to display it
<li ng-repeat="works in problems | filter: searchCard">{{works}}</li>
Now the {{works}} tag shows this in the live document:
{"problem":"probleem1","works":["a0","a9"]}
According to most tutorials and things i've seen its supposed to display the a0 and a9 not the entire json line.
My second question which might be completely different is, how can I display the text correctly but also hide all of them until a person has used the input to search the "works" input field.

when you have objects Array on ng-repeat you have to select that object params; in this sample our object params are "problem" and "works"
also in our object we have "string array" and string array not have params because that we use it directly in this sample {{work}} is object of string array.
<li ng-repeat="item in problems | filter: {problem: searchCard}">
{{item.problem}}
<ul>
<li ng-repeat="work in item.works">{{work}}</li>
</ul>
</li>

you can use the nested ng-repeats like #Maher mentioned. also, in order to hide data until searchCard is typed, you can use ng-if directive in nested ui.
<li ng-repeat="item in problems | filter: searchCard">
{{item.problem}}
<ul ng-if="searchCard">
<li ng-repeat="work in item.works">{{work}}</li>
</ul>
</li>

Angular 1.4: How do I force update of directive within a ng-repeat with filter?

How does one force a directive to update if it nested in a ng-repeat which has a filter?
Input Box
<input type="text" class="name-search" ng-model="search.text">
HTML
<ul>
<li ng-repeat="user in users track by $index | filter:search">
<profile-photo user="user"></profile-photo>
<span>{{ user.name }}</span>
<li>
</ul>
As I type in the input box, the users filter properly but the profile-photo directive doesnt have the proper user.
Any help would be greatly appreciated!
Heres a dumbed down Plunker of my actual code. If you start typing, you will notice that it filters but the image doesnt update.
https://plnkr.co/edit/FWD2bFdIh7jQa5aqdkjrPlunker

your link's function code only executes once, when compiling the directive. After that, scope.photoUrl does not change even if you change the user, because you're not $watching the value. You can add a watch, or directly, use this in the template
ng-src="{{user.photoUrl}}"

Loop to visible items in ng-repeat

It is possible to loop to the visible items in a ng-repeat?
I have a ng-repeat with multiple filters and I want to create a 'select all' function to select all the visible items in the repeat.
How can I get the visible items? The selection may be come undone when the filter is changing, so there are no 'old' selections possible, but that can be easily done to loop all items with no conditional.
<div class="item" ng-repeat='item in collection | product_sex:filter_sex | product_stock: stockKind | filter:productFilter'>
{{item.name}}
{{item.price}}
</div>

you can add a filter like this;
<div ng-repeat="item in items | filter:{visible: true} ">
<p>{{item.id}}</p>
</div>

You could define a variable that represents all visible items by using as expression with a ng-repeat directive:
<div class="item"
ng-repeat='item in (collection | product_sex:filter_sex | product_stock: stockKind | filter:productFilter) as allVisibleItems'>
{{item.name}}
{{item.price}}
</div>
You could access this variable easily, right underneath ng-repeat for example:
<div ng-click="selectAll(allVisibleItems)">Select all Items</div>
More can be read here: https://docs.angularjs.org/api/ng/directive/ngRepeat

Clearing list after search is performed in Angularjs using filters?

I have just started ng and I must say it is too much fun! I am using example from this site
http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/ specifically the 'filter data with angular js'
I followed the example and works fine. The example shows the list and as you type the name it will filter it and show the exact match.
I didn't want to stop there and play with it more, what I want to do is not to show any list initially and as the user types the list is shown. Here is my index.html:
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
<input type='text' ng-init='searchText=" "' ng-model='searchText' />
<ul>
<li ng-repeat='person in people | filter:searchText'>#{{person.id}} {{person.name}}</li>
</ul>
</div>
as you can see I am doing ng-init on the searchText variable and this works fine when I initially open the page i.e. there is no list. But as I type a name the list stays there after filtering is done even when I clear the input box. How can I make the list disappear when I clear the input box?
Do I need some sort of custom filter?
please excuse my ignorance with ng if I am using incorrect terms and please tell me the correct ones :)

you can use ng-show/ng-hide to show/hide the list based on certain condition, as currently you want it on searchText
<ul ng-show="searchText !==''">
<li ng-repeat='person in people | filter:searchText'>#{{person.id}} {{person.name}}</li>
</ul>

Just an another idea to achive what you want:
<input type="text" ng-model="searchText" />
<ul>
<li ng-repeat="person in people | filter:(searchText || ' ')">#{{person.id}} {{person.name}}</li>
</ul>
or if you would like to filter by some default value when the input box is empty:
<li ng-repeat="person in people | filter:(searchText || 'John')">#{{person.id}} {{person.name}}</li>

Angularjs : What is the best way to let Binding Data later update

If I have a ng-repeat directive bind with my initial data,
<!-- list 1-->
<li ng-repeat="data in datas">{{data.name}}</li>
and I change the data by another ng-repeat and ng-model directive,
<!-- list 2-->
<li ng-repeat="data in datas">
<input type="text" ng-model="data.name">
</li>
In Angular way, any method can do list 1 ng-repeat data refresh not immediately (after I click a Save button)?
<button ng-click="save()">Save</button>

You can use a second (temporary) clone to make the changes and copy the changes over to the actual object using angular.copy.
The actual list:
<ul><li ng-repeat="item in items">
{{item.name}} (id: {{item.id}})
</li></ul>
Edit the list:
<ul><li ng-repeat="item in tempCopy">
<input type="text" ng-model="item.name" />
</li></ul>
<button ng-click="persistChanges()">Save</button>
<button ng-click="discardChanges()">Discard</button
In your controller:
/* Persist the changes */
$scope.persistChanges = function () {
angular.copy($scope.model.tempCopy, $scope.model.items);
};
/* Discard the changes */
$scope.discardChanges = function () {
angular.copy($scope.model.items, $scope.model.tempCopy);
};
See, also, this short demo.
Finally, there is a similar example on the Angular docs on angular.copy.

It seems you are creating new items within datas by extending the array by one element? If this is so, why not use a different model for the form and push the result onto the array data when the save button is clicked?
Similarly, when editing an item, clone the array element and make it the model for the resulting form, then modify the original array element when the save button is clicked.