I have some data in the form of array, which I am converting into an object using _.groupBy(data, ""filter"). After grouping, it looks like this
$scope.data = {"Key1" : [{}, {}], "Key2" : [{}] }
I am looping this object using ngRepeat, and have a directive inside the ngRepeat like below.
<div ng-repeat = "(key, value) in data">
<my-directive id={{$index}} group = "data[key]"></my-directive>
</div>
The problem I am facing is, on refreshing and calling the service again, the updated array of keys is not displayed on the UI. However, if any new key is added in the data object, only then UI is updating.
Any suggestions please.
Related
I have a method to save an object. That object is added to an array after its saved. The object has many properties . So, before adding the object to an array I am modifying few properties. Few of them don't reflect in UI .
Code :
HomeController.js
$scope.MainArray=[];
$scope.newItem={};
AdjustmentController.js
$scope.Save = function(item){
$scope.newItem={};
var promiseObj= $http.post('My_Url',{expectedItem: item});
promiseObj.success(function(data,status){
$scope.newItem.Id= data;
$scope.newItem.dataList= item.dataList;
$scope.newItem.LatestComment = item.LatestComment;
$scope.newItem.CreatedDate = item.CreatedDate;
if($scope.MainArray.length==0){
$scope.MainArray.push($scope.newItem);
}
else{
$scope.MainArray.unshift($scope.newItem);
}
})
}
HTML :
<body ng-controller="HomeController">
<div ng-controller="AdjustmentController">
<div ng-repeat="item in MainArray ">
<!-- This past is not updated -->
<span>{{item.LatestComment}}</span>
<span>{{item.CreatedDate}}</span>
<!-- This past is updated -->
<span>{{item.DataList[0].text}}</span>
<span>{{item.DataList[1].text}}</span>
<span>{{item.DataList[2].text}}</span>
<span>{{item.DataList[3].text}}</span>
</div>
</div>
</body>
The value is changes if I console and see. But in UI it updated only few values and LatestComment and CreatedDate is not updated.
I have also tried using $scope.$apply() , but it did not work.
You need to initialize variable $scope.MainArray when controller loads, then after you need to just over write it when it will needed to save.
In your controller define variable like this :
$scope.MainArray=[];
and then use it in your save object function.
Here, you only send the item to your backend:
var promiseObj= $http.post('My_Url',{expectedItem: item});
and here you expecting it to be changed:
$scope.newItem.dataList= item.dataList
$scope.newItem.LatestComment = item.LatestComment;
$scope.newItem.CreatedDate = item.CreatedDate;
Your answer is contained in the data object, not the item. item won't ever change this way.
I would like to filter my item store in database, but I don't want to use filter like this :
<li ng-repeat="post in posts | filter: { etat: 'enCours' } ">
This line filter all the posts where etat = 'enCours', but this cause me several problem cause I have several ng-repeat and I can't use $index.
I would like to do something like this :
<li ng-repeat="post in postsEnCours">
With using this function :
This line give me all the post store in my database
$scope.posts= Posts.query();
$scope.postsEnCours = $scope.posts.filter(function(item, index) {
return item.etat === 'enCours';
})
But nothing appears do you know why ?
You shouldn't be depended on ng-repeat's $index .
If you use isolate directive or directive with scope : true in ng-repeat, you won't find $index correctly.
Posts.query() may have callback. If it has callback then you have to put your filter inside it's callback's method.
I have a simple issue with AngularJS: the properties outside of the array update normally, but the array elements (that are bound to those properties) don't, here is a plunker to show that: http://plnkr.co/edit/gNtGhiTf228G8rP0O2iB?p=preview
var vm = this;
vm.topLine = {
netWrittenPremiumLastFye: 1000000,
netWrittenPremiumYtd: 123000
}
vm.grossColumnChartData = [
['Previous YE', vm.topLine.netWrittenPremiumLastFye],
['YTD', vm.topLine.netWrittenPremiumYtd]
];
We can use $scope.$watch('something', function(oldValue, newValue) {...}) but that's not a good choice in my situation since i'll have to do that many times, repeatedly.
I want to take advantage of angular 2-way binding as explained above.
Any helps or suggestions are appreciated, thanks!
I think the only way you can do this without using $watch is by updating the array directly in the html binding.
{{ grossColumnChartData = [
['Previous YE', vm.topLine.netWrittenPremiumLastFye],
['YTD', vm.topLine.netWrittenPremiumYtd]
] }}
<br/>
grossColumnChartData = {{grossColumnChartData | json}}
See this:
http://plnkr.co/edit/uthXcvoWSV2XNRFJzkck?p=preview
I have updated my plnkr and i have my answer now: http://plnkr.co/edit/gNtGhiTf228G8rP0O2iB?p=preview
<div ng-repeat="item in vm.grossColumnChartData">
<label>Input {{$index+1}}:</label>
<input ng-model="item.data" type="text"/>
</div>
I was confused between data binding and reference.
I used ng-repeat to update the array elements.
I have this pseudo code angularjs app. You can select a hobby for each person, save it and load it again.
However when I load the data, the select boxes dont have the correct option selected. person.hobby exists and is the correct object, but it looks like ng-model isn't set correctly.
Am I missing something?
<div ng-repeat="person in people">
<p>{{ person.fullname }}</p>
<select ng-model="person.hobby"
ng-options="h.hobby_name group by h.category for h in hobbies">
</select>
</div>
<script>
//... controller...
$http.get('/gethobbies/').succes(data) {
hobbies = data;
};
$http.get('/getpeople/').succes(data) {
people = data;
// looks like this: [{'fullname': 'bill gates', 'hobby': {'hobby_name': 'programming', 'category': 'computers'}, ...]
};
</script>
ng-model needs to be set to the exact same object as the one in the ng-options array that you want to be selected. Angular uses object references to figure out which one should be active so having a "hobby-object" with the same "hobby_name" as one of the objects in "hobbies" is not enough. It needs to be a reference to the same object.
See documentation for select for details
I'm trying to update a $scope object's array that is displayed in a ng-repeat on the page using input elements containing the array's contents. The plunker example can be found here: Plunker demo (Basic, stripped down example of my problem)
I have the following settings object defined:
$scope.settings = {
list: ['list item one', 'list item two', 'list item three']
};
and I am representing the data on the page like so:
<ul>
<li ng-repeat="item in settings.list">
<input type="text"
value="{{item}}"
ng-model="singleItem"
ng-change="settings.list[$index] = singleItem" />
delete
</li>
</ul>
My goal is to initially populate the <input> fields with the contents of $scope.settings.list and whenever an item is changed update the array, but I haven't figured out how to in the view. Omitting the ng-model and ng-change on the input properly renders the input vale in the text boxes, but then the array isn't modified when changes are made.
Side Note:
In the Plunker example I have $watch on the settings object. In my actual code, this is used to update a "settings cookie" using the $cookies module. Cookies have been omitted in the example, but for debugging purposes I have left the watch in.
There are two primary problems with your approach. The first is that ngRepeat uses an inherited scope, so primitive values (like strings and numbers) don't play nicely. You should pass arrays of objects to ngRepeat rather than arrays of primitives. Your second problem is the over-complicated way of of binding to an input. All you need is to this:
$scope.settings = {
list: [
{ val: 'list item one'},
{ val: 'list item two'},
{ val: 'list item three'}
]
};
And then in your view:
<ul>
<li ng-repeat="item in settings.list">
<input type="text" ng-model="item.val"></input>
<a ng-click="remove($index)">delete</a>
</li>
</ul>
Here's a revised plunker: http://plnkr.co/edit/ZGFjBnVSwM4hNSgVSOCW?p=preview .