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.
Related
I'm using ng-repeat on my page. ng-class working very well.
<div class="card news" ng-repeat="item in news track by $index" id="{{news.nid}}" ng-init="parentIndex = $index" ng-class="{hidden: '{{getCheck($index)}}' == 'true'}">
...
</div>
Now I need, if all items are hidden, show this div:
<h3 class="news-empty">No news</h3>
Whats the rules? How can I do it? Thanks.
You need another method that checks if all elements are hidden:
$scope.everythingIsHidden = function() {
return $scope.news.every((new, index) => $scope.getCheck(index));
}
$scope.getCheck = function(index) { // Your getChek function that I suppose it checks if an element is hidden based on index
//...
}
<h3 class="news-empty" ng-if="everythingIsHidden()">No news</h3>
TheCog's answer will work. If you want to do this in a more 'Angular' way you're going to need to refactor what you have.
You shouldn't be trying to hide them with a CSS class. ngRepeats have a built in filter syntax. So, you should be filtering them out.
<div class="card news"
ng-repeat="item in news | filterMethod as results track by $index"
id="{{news.nid}}"
ng-init="parentIndex = $index"
>
<h3 class="news-empty" ng-if="results.length === 0" >No news</h3>
The as results statement in the repeat will store the filtered array in results. filterMethodneeds to be an angular filter and it will probably work similarly to your getCheck($index) method.
You want to add an ngShow to the h3 tag, and aim it at a function you write in your controller that checks if the array is empty, probably by iterating over the same array that's hidden and running getCheck($index) on each.
I'm kind of new to angularJS
I have code; all of it is wrong.
I'm creating a json object with options.
I have a json object called "match" with a property "lineup".
When you check the checkbox for any player, you add this player to the lineup property like:
lineup:[{uid:1,pos:0},{uid:2,pos:0}]
What I want to know is how can I assign the select to an specific item in the lineup array. In example, if I change the select for the player 1, then lineup would change to:
lineup:[{uid:1,pos:2},{uid:2,pos:0}]
Btw, I know I can use ng-options for the select directive, but this is the last code I got before coming here.
<ul class="list-group" ng-if="match.formation > 0">
<li class="list-group-item" ng-repeat="p in players track by $index">
<input type="checkbox" ng-model="p.lineup"
ng-change="setLineup(p,$index)"
ng-disabled="match.lineup.length > 10 && (p.lineup == 0 || !p.lineup)" />
{{p.player}}
<select ng-model="" class="pull-right">
<option ng-repeat="e in NotSelectedPosition() track by $index"
value="{{e.id}}">{{$index+1+'.- '+e.name}}</option>
</select>
</li>
Edit:
players is a json object as well:
$scope.players = [{uid:1,lineup:false,name:'player1'},
{uid:2,lineup:false,name:'player 2'},etc
];
formation is just an integer value
Bind it with p.uid not p.lineup beacuse you are using ng-repeat="p in players track by $index", which means you get the objects in an array one by one.
I have a table that is populating with ng-repeat, and I also have navigation button that change table data. Before I had custom filter on the data in html file, like so:
ng-repeat="car in carList | filter:tableFilter"
Even so it worked, it slowed my website, a lot. So now I am updating my table data in my controller. But there is another problem, ng-repeat do not want to update. So no matter how much I will update my data, the table will be still the same.
How can I fix that?
Here is my ng-repeat:
<tbody>
<tr ng-repeat="car in sortedCarList">
....
Here is my nav-bar:
<section class="tab" ng-controller="TablePanelCtrl as panel">
<ul class="nav nav-pills car-navigation">
<li ng-class="{ active: panel.isSelected(1)}">
<a href ng-click="panel.selectTab(1); initCarList(1); resetActiveRow(); formattedTable(2); hideTypeBox()">Sort by Reviews</a>
</li>
<li ng-class="{ active: panel.isSelected(2)}">
<a href ng-click="panel.selectTab(2); initCarList(2); resetActiveRow() formattedTable(2); hideTypeBox()">Sort by Rating</a>
</li>
</ul>
initCarList() changes the data according to tab number.
formattedTable() filters table data according to filter values that can be changes by user.
UPDATE:
my formatting function:
$scope.formattedTable = function(index){
$scope.initCarList(index);
$scope.sortedCarList = [];
var carlistLength = $scope.carList.length;
for (var i=0;i<carlistLength;i++){ // just check every row if values passes user requirements
var rowBool = $scope.tableFilter($scope.carList[i]);
if (rowBool){
$scope.sortedCarList.push($scope.carList[i]);
}
}
}
While I agree with cerbrus that we need to see a bit more of your code, I'll take a stab in the dark : you call formattedTable(2) in both tabs, which means that your filtering never changes.
See this plunker.
<div ng-repeat="subCategory in subCategorys | filter:{tags:tag}:true | orderBy:'id'">
{{subCategory.id}} {{subCategory.name}} {{subCategory.tags}}
<br/><br/>
You are now seeing details of <span ng-init="subCats = subCats + ' ' + subCategory.name">{{subCats}}</span>
</div>
This HTML page shows a filtered result from an object. However, I want to display a consolidated result of the names after "You are now seeing details of" like for example, "You are now seeing details of jim tom". This consolidated list should appear after the element which has ng-repeat directive.
How can this be done?
Thanks
I made an updated plunker for you.
Please try to make your example plunker way more reduced to the specific problem in the future as this helps us to help you.
First I added the search binding as filter to the ng-repeat to make the filter workable:
<div ng-repeat="subCategory in subCategorys | filter:{tags:tag}:true | filter:{id:search} | orderBy:'id'">
To avoid executing the filter twice you can save the filter result directly into a scope variable by simply assinging it (in my example to subCategorysFilter):
<div ng-repeat="subCategory in subCategorysFilter = (subCategorys | filter:{tags:tag}:true | filter:{id:search} | orderBy:'id')">
I further changed your getAllFilteredNames() method to take a filter object as argument and made it loop through the results, build an array of the names and join them with a , as separation:
$scope.getAllFilteredNames = function(filter){
var names = [];
angular.forEach(filter, function(element){
names.push(element.name);
});
return names.join(", ");
};
This is now called outside the ng-repeat directive:
You are now seeing details of {{getAllFilteredNames(subCategorysFilter)}}
Have fun!
Update
Two possible solutions for getting a multilined output:
1 - You might change the line
<div>You are now seeing details of {{getAllFilteredNames(subCategorysFilter)}}</div>
to
<div>You are now seeing details of <span ng-bind-html="getAllFilteredNames(subCategorysFilter)"></span></div>
Then any html tags within the expression are compiled as html code. But there are meaningful reasons for angular disabling this feature by default. If your objects are editable by users you need to prevent them from breaking your design by escaping all html tags...
2 - But if you do not need to display the cosolidated information within a single string, you might simply use another ng-repeat combined with an <ul> like this:
<div>You are now seeing details of <br/>
<ul>
<li ng-repeat="subCategory in subCategorysFilter">{{subCategoryName}}</li>
</ul>
</div>
Just style your li accordingly to be displayed underneath each other and you're ready to go.
You can do this in your HTML by moving your consolidated list outside of the ngRepeat and calling the filter again:
<div ng-repeat="subCategory in subCategorys | filter:{tags:tag}:true | orderBy:'id'">
{{subCategory.id}} {{subCategory.name}} {{subCategory.tags}}
<br/><br/>
</div>
<div>
You are now seeing details of
<span ng-repeat="subCategory in subCategorys | filter:{tags:tag}:true | orderBy:'id'">
{{subCategory.name}}
</span>
</div>
The drawback to this approach is that you are calling the filter twice. A better alternative would be to set up a $watch in your parent controller and invoke the $filter manually. I.e. Save the filtered results in a scope variable. The benefit is that the filter is called half as many times and the scope variables you set up are visible to the original list and the consolidated list.
app.controller('ParentController', function($scope, $filter) {
$scope.subCategorys = [{...}];
$scope.tag = {...};
$scope.$watchCollection('subCategorys', function(newList){
//if the collection changes, create a new tag
//reference that is a copy of the old one to trigger
//the tag watch listener
if (newList)
$scope.tag = angular.copy($scope.tag);
});
$scope.$watch('tag', function(newTag){
// if tag changes, apply the filter,
// and save the result to a scope variable
if(newTag)
$scope.filteredList = $filter('filter')
($scope.subCategories, { tags: newTag}, true);
});
});
HTML
<div ng-controller="ParentController">
<div ng-repeat="subCategory in filteredList | orderBy:'id'">
{{subCategory.id}} {{subCategory.name}} {{subCategory.tags}}
<br/><br/>
</div>
<div>
You are now seeing details of
<span ng-repeat="subCategory in filteredList | orderBy:'id'">
{{subCategory.name}}
</span>
</div>
</div>
I'm afraid there is no way of doing that except for selecting the subCategory back. Fortunately, there is a pretty elegant 'angular' way of doing that. Add this to your controller:
$scope.getSubCatById = function(someId) {
return $filter('filter')($scope.subCategorys, {id:someId})[0];
}
And then your html:
<div ng-repeat="subCategory in subCategorys | filter:{tags:tag}:true | orderBy:'id'">
{{subCategory.id}} {{subCategory.name}} {{subCategory.tags}}
<br/><br/>
You are now seeing details of {{ getSubCatById(2).name }}
</div>
I hope I interpreted your question correctly.
UPDATE: After some very insightful code from #Marc Kline, I went back and cleaned up my page. It turned out that I had my controllers listed in reversed (My angular controller was inside the Isotope controller, instead of the other way round). Once I changed it back and cleaned off some additional scripting, it started working again. I have updated the code snippet to reflect the change. Thanks to Marc and S.O!
I am having trouble figuring out how can I add new items using Angular and still let Isotope manage their UI display.
I am using Isotope and Angular to render server results in a masonry style layout. When I add new items to the layout on a button click, angular adds it just fine. However, they do not appear in the context of the isotope UI and appear separately (and cannot be sorted, laid out or filtered using Isotope).
Here is my JS Code
<!-- Define controller -->
var contrl = app.controller("MainController", function($scope){
$scope.items ={!lstXYZ}; //JSON data from server
//Function called by button click
$scope.addItem = function(item)
{
$scope.items.push(item);
$scope.item = {};
}
});
contrl.$inject = ['$scope'];
Here is the HTML to display the server results...(Updated to show working code..refer comments)
<div ng-controller="MainController">
<div class="isotope" id="isotopeContainer">
<div ng-repeat="item in items">
<div class='element-item {{item.status}}' data-category='{{item.status}}'>
<p class="number">{{item.type}}</p>
</div>
</div>
</div>
</div>
And here is my HTML button to add the new items
<table>
<tr>
<td><input type="text" ng-model="item.status" /></td>
</tr>
<tr>
<td><input type="text" ng-model="item.type" /></td>
</tr>
<tr>
<td colspan="2"><input type="Button" value="Add" ng-click="addItem(item)" /> </td>
</tr>
</table>
I am not sure how do I ensure that Isotope can recognize the newly added element and re-animate the layout.
Any help or pointers will be very appreciated. Thanks!
ng-repeat takes care of adding the new element to the DOM for you. However, Isotope isn't doing any "watching" for you - you have to manually invoke a redraw of the container.
You could just add something like $("#isotopeContainer").isotope(...) directly to your controller, but in the spirit of keeping your controllers lean and free of DOM-related code, you should instead create a service. Something like:
myApp.service('Isotope', function(){
this.init = function(container) {
$(container).isotope({itemSelector: '.element-item'});
};
this.append = function(container, elem) {
$(container).isotope('appended', elem);
}
});
... where the first method initializes a new Isotope container and the next redraws the container after an item is appended.
You could then inject this service into any controller or directive, but directives probably are best for this scenario. In this Plunker, I created two new directives: one for Isotope containers and another for Isotype elements, and used the service to do the initialization and redrawing.
In this particular case, my code was not written correctly. I have updated the question's code but wanted to mention it more clearly here...
Apparently, the beauty of Angular is that you do not need to bother with the underlying UI framework (Isotope in this case). As long as you update the Angular data array, the UI binding is updated automatically.
The only gotcha is to ensure that the UI framework div is within the context of your Angular div.
Here is the non-working code...Note that the isotope div is outside the Angular controller.
<div class="isotope" id="isotopeContainer">
<div ng-controller="MainController">
<div ng-repeat="item in items">
<div class='element-item {{item.status}}' data-category='{{item.status}}'>
<p class="number">{{item.type}}</p>
</div>
</div>
</div>
</div>
Here is the updated code with isotope running within the Angular controller context...
<div ng-controller="MainController">
<div class="isotope" id="isotopeContainer">
<div ng-repeat="item in items">
<div class='element-item {{item.status}}' data-category='{{item.status}}'>
<p class="number">{{item.type}}</p>
</div>
</div>
</div>
</div>
Hope this helps. I am thankful for all the responses and help I got from SO. Appreciate the learning opportunity.