I have created a rootScope variable like
$rootScope.globalData = data;
$rootScope.globalData.chillerConditions.HeatSource.Value = "ST"; //Default Value
$scope.chillerConditions.HeatSource.Value = 1; //Default Value
where data is my returning value from api. Also create a scope variable which is a object contains a list of items.
$scope.chillerAttributes = data.ObjCandidateListChillerAttributes;
$scope.chillerConditions = data.ObjCandidateListConditions;
On HTML I have:
<select ng-model="chillerConditions.HeatSource.Value" style="width:53%;" ng-options="item.Id as item.Description for item in ValidRatingHeatSource" ng-change="heatSourceChanged()" id="ddRatingHeatSource" class="form-control search-select designComboboxHeight" data-container="body"></select>
Here ValidRatingHeatSource is
$scope.ValidRatingHeatSource = \*list of items*\
On change of Drop Down I have written an function. In that
if($scope.chillerConditions.HeatSource.Value == 2)
{
$rootScope.globalData.chillerConditions.HeatSource.Value = "HW";
}
else
{
$rootScope.globalData.chillerConditions.HeatSource.Value = "ST";
}
Till now was the my current code.
Issue is :
When the above function is called then whenever current $rootScope varible i.e. $rootScope.globalData.chillerConditions.HeatSource.Value is changed to "HW" or "ST" it also changing $scope.chillerConditions.HeatSource.Value to "HW" or "ST".
Why so?
Is there any inbuilt functionality in angularjs?
Please suggest if I am making any mistake? New suggestion are also welcome.
This behavior is the way JavaScript works and has nothing to do with AngularJS. JavaScript is an object-oriented (prototype-based) language where objects are addressed by reference and not by value. E.g. assign car2 to car1 and both of them will reference the same object (JSFiddle)
var car1 = {make: "Audi"}
var car2 = car1;
car2.make = "Toyota";
So in your case, $rootScope.globalData.chillerConditions.HeatSource and $scope.chillerConditions.HeatSource are the same object.
Rather, it seems like you want to create a copy. You can do so with angular.Copy
$scope.chillerAttributes = angular.copy(data.ObjCandidateListChillerAttributes);
$scope.chillerConditions = angular.copy(data.ObjCandidateListConditions);
In your example u have both ng-model and ng-change, so:
1. User change value in select.
2. $scope.chillerConditions.HeatSource.Value changes (ng-model)
3. heatSourceChanged starts (ng-change) -> $rootScope.globalData.chillerConditions.HeatSource.Value changes
So everything works as should...
Related
I have a very simple piece of code to run a dynamic sortBy over my array. I am using a select with ng-model to return the correct key by which to sort. However, I can change the select once, and the orderBy works. But once I do it again, I get a very strange error
Controller
//change task sort
$scope.changeOrder = 'task_date';
$scope.changeOrder = (filterTask) => {
if (filterTask == "due") {
$scope.changeOrder = 'task_date';
} else if (filterTask == "imp") {
$scope.changeOrder = 'task_importence';
}
};
Template
<select ng-change=changeOrder(filterTask) ng-model="filterTask">
<option value="due">Due First</option>
<option value="imp">Importance</option>
</select>
<task-item ng-repeat="task in $ctrl.user.task | orderBy : changeOrder"></task-item>
Here is the error - There is nothing called "v2" in my system
Welcome to the untyped world that is JavaScript.
Your error is actually quite apparent: $scope.changeOrder becomes a function and a standard variable. Once you select a value in your select drop-down, it ceases to be a function and reverts to a standard variable. Then, you can no longer call it.
You would be wise to split this up into two variables instead. I'd recommend using $scope.orderState and $scope.changeOrder, where orderState just holds the strings and changeOrder is your function.
I think the problem is that both of your $scope variables have the same name. You try to assign a function and a value to $scope.changeOrder. Try splitting it up into two variables
So have two directives that need to share data. Both are under the same controller, so set up the variable $scope.selection to store the selection, it gets a default value in the controller.
knowledge.controller('industryController', function($scope, mwFactory){
$scope.menudata={sections: [
{group: 'FMP', name: 'Finance'},
{group: 'FinTech', name: 'Financial Technology'},
]
}
if ($scope.selection) {
console.log("This is " + $scope.selection)
} else {
$scope.selection = 'Main_Page'
}
})
I then send that to a menu where you can make selection
<nav-circle group="section.group" ng-model="selection"></nav-circle>
I then set it as follows inside the directive
function nodeclick(d){
//console.log("Name is " + d.url);
console.log("Old model is " + ngModel.$modelValue)
ngModel.$modelValue = d.url;
ngModel.$viewValue = d.url;
console.log("New model is " + ngModel.$modelValue)
}
However, it does not seem like it is updating, or potentially even weirder, that something is resetting ngModel.
Got a call further up,
ngModel.$render = function () {
console.log("ngRender got called " + ngModel.$modelValue);
};
And this kicks off every minute or so, and always returns the value to the original value. What am I missing
OK, this may not be the best way, but it works, and sometimes that is enough:)
Instead of sending a variable I sent an object, and I think (someone who knows angular and javascript better may be able to explain/confirm) this means that the directive will be writing to a memory address rather than to a variable. Which also means that the ng-model will not change (the memory address is the same, the data stored at that memory address is changed).
Might be wrong, but the solution works as if that was the case.
So, define the scope variable:
$scope.selection = {};
$scope.selection.default = 'Main_Page'
$scope.selection.current = '';
Then send the following to the directives:
<nav-circle group="section.group" ng-model="selection.current"></nav-circle>
And to change the scope variable in the directive you just set viewValue
ngModel.$setViewValue(d.url);
As I mentioned, I am not certain if this is the right way, or if my understanding is correct, but it works:)
I have been using Angular Material for a while in my project. While using md-select, I am stuck to a problem wherein I am getting Duplicate md-option values error.
I am aware that md-options takes unique values and I am assigning an array to md-options. This is however, an array of objects. So I would like to know what is the criteria that is used to differentiate objects. The API do not say much about it.
My use case demands to change md-options of an md-select, based on selection from another md-select. So I am watching the selection of first md-select and firing a watch on its change and updating md-options of second md-select.
Below is the approach I am using to assign array to md-options:
$scope.$watch('search.selectedTrades', function(newTrades, oldTrades) {
if ((newTrades.length === 0)) {
$rootScope.search.selectedTrades = oldTrades;
return;
}
if ($rootScope.search.selectedTrades && $rootScope.search.selectedTrades.length > 0) {
if (!$rootScope.identity.isClusterManager) {
$rootScope.search.selectedTrades = newTrades;
SearchFilterData.setSelectedTrades(newTrades);
$rootScope.search.selectedClusters = [];
$scope.clusters = [];
$scope.subareas = [];
var clusterKeys = [];
$rootScope.search.selectedTrades.forEach(function(t) {
t.lstClusters.forEach(function(c) {
if (clusterKeys.indexOf(c.ClusterKey) == -1) {
clusterKeys.push(c.ClusterKey);
$scope.clusters.push(c);
}
})
})
}
} else {
$scope.clusters = [];
$scope.subareas = [];
$rootScope.search.selectedClusters = [];
$rootScope.search.selectedSubAreas = [];
SearchFilterData.setSelectedTrades($rootScope.search.selectedTrades);
}
});
In above code, clusterKey is a unique entity for each object. So I am using it to push unique values into array.
This however happens on few random scenarios, after I have selected and de-selected various options. Please advise what I am doing wrong and what is the criteria for marking two objects duplicate
You did not provide your markup, so I cannot be sure, but in my case the problem was caused by omitting the double curleys on the 'value' attribute in the md-option tag.
This is bad: Notice the missing curly braces
<md-option ng-repeat="item in vm.list" value="item.id">{{item.text}}</md-option>
This is not:
<md-option ng-repeat="item in vm.itemlist" value="{{item.id}}">{{item.text}}</md-option>
I believe the reason that this fails is that each item will be placed into the option list will be given a value of 'item.id' (literally). It will fail on the second iteration of the repeat.
Using the curly braces causes the value in 'item.id' to be used.
Hope this helps.
Try using ng-value instead of just value attribute.
<md-option ng-repeat="item in vm.list" ng-value="item.id">{{item.text}}</md-option>
I have an array and a var
$scope.fcFeedTypes = [{"name":"Plain Text","value":"Plain Text"},{"name":"MQ Message","value":"MQ Message"}];
}
$scope.feedEditor.ft = "MQ Message"; // this is dynamically obtained from some other source
I want a dropdown select with default selection based on the value of $scope.feedEditor.ft
HTML:
<select ng-model="fcFeedTypes"
ng-options="ft.name for ft in fcFeedTypes"
ng-init="ft=feedEditor.ft">
I am new to AngularJS and need some help...
If you just want the string "MQ Message" (or the value of whatever a user selects) as your ng-model value, then it's quite simple:
<select ng-model="someModelName"
ng-options="ft.value as ft.name for ft in fcFeedTypes"
ng-init="someModelName=feedEditor.ft">
If you want the full object as the ng-model value, then you've got to find the right one in JS. It must be referentially/strictly equal to the one in the options.
<select ng-model="someModelName"
ng-options="ft.name for ft in fcFeedTypes">
-
$scope.fcFeedTypes = [{"name":"Plain Text","value":"Plain Text"},{"name":"MQ Message","value":"MQ Message"}];
$scope.feedEditor.ft = "MQ Message"; // this is dynamically obtained from some other source
angular.forEach($scope.fcFeedTypes, function(feedType){
if(feedType.value === $scope.feedEditor.ft){
$scope.someModelName = feedType;
}
});
I need to initialized without binding.
I've tried the following. But I did not succeed
$scope.emptyRow = $scope.newsCategories[1];
$scope.newsCategories[1].Name = "yes";
$scope.emptyRow.Name = "test";
alert($scope.emptyRow.Name); // alert => test
alert($scope.newsCategories[1].Name);// alert => test
I need this :
$scope.emptyRow = $scope.newsCategories[1];
$scope.newsCategories[1].Name = "yes";
$scope.emptyRow.Name = "test";
alert($scope.emptyRow.Name); // alert => test
alert($scope.newsCategories[1].Name);// alert => yes
How to do this?
This has nothing to do with binding, but rather basic javascript.
The line: $scope.emptyRow = $scope.newsCategories[1];
is explicitly saying that you want $scope.emptyRow and $scope.newsCategories[1] to be pointing to the exact same object. Hence, when you change a child value of either (like Name), it will effect the other.
It looks like you want to be able to copy the object in question. For that you can use angular.copy(). An example use in your case would be:
$scope.emptyRow = angular.copy($scope.newsCategories[1]);
Read here for more info.