I created an array.
JS code
$scope.type = ["status", "category", "subCategory", "room"];
I want to use array item as variable. I have to create dynamically. Later I will add a dynamic value. For example when I use $scope.type[0]
variable have to be $scope.status How can I do?
You can do that by using the bracket notation.
$scope[$scope.type[0]] = "dynamic value";
To create for every item in array --
$scope.type.forEach(function(value){
$scope[value] = "any dynamic value"
})
Is this your need ?
$scope[$scope.type[0]]
You can try below.
$scope.status = $scope.type[0];
$scope.category= $scope.type[1];
$scope.subCategory= $scope.type[2];
Related
I´m new to stackoverflow and not an english native speaker, so apologies for any mistakes.
We have an Angular/C# project in a course of study and I need an Angular mat-select which works with an ID (number) but displays a String instead.
In my typescript class I already have an Array<number> fruitIDs . Now I want to take every element of the array and apply a function fruitName(fruitID) on it (fruitName(fruitID) returns a string).
My problem is that I need to put the elements of the array and their corresponding function values in a form like:
fruits =
[{value: idOfFirstFruit, viewValue: fruitName(idOfFirstFruit)},
{value: idOfSecondFruit, viewValue: fruitName(idOfSecondFruit)},....]
If I have an object in this form my mat-select can access and save value but display `fruitName(value)' instead.
I hope anyone can help. Thanks in advance!
Ok, if anybody is interested, I found the solution:
var fruitNrs:Array<number> = this.fruits.map(item => {return item.fruitNr});
var objArray: Array<{value:number,viewValue:string}> = [];
for (let fruitNr of fruitNrs){
objArray.push({value:fruitNr,viewValue:this.fruitname(fruitNr)});
}
$scope.data = {name:"harold", age:"25", address:"california USA",};
function assignData() {
$scope.data = angular.copy($scope.data);
};
how can i copy a data in an object into an object inside a function using angular.copy? or any other idea of doing this beside ng-copy? just ignore the data being used lets just assume that the data in $scope.data is too many thats why im finding ways to lessen the codes. thank you soo much
You can use second parameter in copy method like: angular.copy(source, [destination]);
Or do let me know what is the exact problem?
inner functions has all access to the variables declared in outer function.
like
$scope.data = {name:"harold", age:"25", address:"california USA",};
create one more variable
$scope.data = {name:"harold", age:"25", address:"california USA",};
$scope.dup_data;
function assignData() {
$scope.dup_data = angular.copy($scope.data);
};
Note:
angular.copy performs only a shallow copy when dealing with objects.so $scope.data and $scope.dup_data pointing to the same object.
I have a series of arrays, filled with objects - in JSON format. They look something like this:
Group 1
[
{ "name" : "John",
"age" : "31"
},
{ "name" : "Bob",
"age" : "33"
}
]
Group 2
[
{ "name" : "Jim",
"age" : "46"
},
{ "name" : "Harry",
"age" : "23"
}
] // ... and so on ...
In Angular, how can I join the two arrays to form an array of arrays? I'm guessing it's group1.concat(group2), or something like that? I'm not sure where to do it though, would I do this in the controller?
Currently I have a $scope property assigned to each variable, would I make a new $scope property that was a concatenated array of each of these?
And would that be something like:
$scope.allGroups = []
$scope.allGroups = $scope.group1.concat($scope.group2)
// since 'allGroups', 'group1', and 'group2' have all been defined can I do...
allGroups = group1.concat(group2) // ...or does $scope need to be used each time?
My intention is (with the necessary filters) to be able to do an ng-repeat through all groups as they will now all be linked to one $scope variable.
I'm pretty sure that's laiden with errors, but I thought it better to provide some bad code than nothing at all, just so it was more evident what I was trying to do. If there are better approaches (which I'm sure there are), I'm all ears.
Thanks in advance
You're right, array1.concat(array2) is the good method to use.
Now the question is, do you need group1 and group2 to be on your $scope ? Do you need to display them ?
If the answer is no, then you could simply do as follow:
Recover the two arrays and store them in 2 "private" variables
Concat them into a variable set into your $scope
You dont have to set variable into your $scope if you dont display them. It will then look like this:
$scope.allGroups = group1.concat(group2)
Otherwise, no other choice than do like you said:
$scope.allGroups = $scope.group1.concat($scope.group2)
EDIT
If you want an array containing the group1 and group2 arrays, and not only their content, you can simply use the push() method as follow:
$scope.allGroups = [];
$scope.allGroups.push(group1, group2);
If you want to be able to access the concatenated array from your views you have to attach the concatenated array in the $scope object, so you will have to use
$scope.allGroups = $scope.group1.concat($scope.group2)
In the case that you leave var allGroups not attached to the $scope object allGroups will be a local variable to the controller function and will be available only through a closure
You can use concat() to join one array with another.
concat() function returns an array.
Here is the code:
$scope.a = [1,2];
$scope.b = [3,4];
$scope.c = $scope.a.concat($scope.b);
I'm aware that Angular filters can only be applied to arrays, not objects
I'm attempting to include templates added dynamically using the following code. All seems to work well until you see the order
What I would like to have this order:
Create
Book
Address
here is the Plunker
seems like angular will get ng-include by ordering the names according to their name,
so when you use
$scope.templates =
{
_address : 'address.html',
_create : 'create.html',
_book : 'book.html'
};
ordering template according to their names, then _address comes first _book comes second _create comes third
simple approach to solve
$scope.templates =
{
_a_create : 'create.html',
_b_address : 'address.html',
_c_book : 'book.html'
};
here is the Plunker
Instead of using a key-value object, why not use an array? ng-repeat orders the iteration by the index of the iterated object/array.
FORKED DEMO
$scope.templates = [
'create.html',
'book.html',
'address.html'
];
I'm trying display some data loaded from a datastore and it's not reflecting changes on the UI. I created an example to show a general idea of what I'm trying to achieve.
http://plnkr.co/edit/MBHo88
Here is the link to angularjs example where they show when on click then dropdowns are clear out. If you replace the expression with one of the colors of the list dropdowns are well selected. Does this type of selection only work on user events?
http://docs.angularjs.org/api/ng.directive:select
Help is appreciated!!!
Actually the problem is that ngSelect compares objects using simple comparition operator ('=='), so two objects with same fields and values are considered as different objects.
So you better use strings and numbers as values ('select' parameter in expression of ngSelect directive).
Here is kind of solution for your plunker.
Aslo there are some discussion about this topic on GitHub:
https://github.com/angular/angular.js/issues/1302
https://github.com/angular/angular.js/issues/1032
Also as I headred there is some work in progress about adding custom comparor/hashing for ngSelect to be able to use ngSelect more easier on objects.
One mistake in the initialization of your controller. You have to refer to the objects in your palette, since these are watched on the view:
$scope.selectedColors.push({col: $scope.palette[2]});
$scope.selectedColors.push({col: $scope.palette[1]});
Same with your result:
$scope.result = { color: $scope.obj.codes[2] };
Then you need to watch the result. In the below example, select 1 receives the value from the initiating select, the second receives the value below in the palette. I don't know if that's what you wanted, but you can easily change it:
$scope.$watch('result', function(value) {
if(value) {
var index = value.color.code -1;
$scope.selectedColors[0] = {col: $scope.palette[index] };
$scope.selectedColors[1] = {col: $scope.palette[Math.max(index-1, 0)] };
}
}, true);
See plunkr.
Ok, I think I figured this out but thanks to #ValentynShybanov and #asgoth.
According to angularjs example ngModel is initialized with one of the objects from the array utilized in the dropdown population. So having an array as:
$scope.locations = [{ state: 'FL', city: 'Tampa'}, {state: 'FL', city: 'Sarasota'} ....];
And the dropdown is defined as:
<select ng-options="l.state group by l.city for l in locations" ng-model="city" required></select>
Then $scope.city is initialized as:
$scope.city = $scope.locations[0];
So far so good, right?!!!.. But I have multiple locations therefore multiple dropdowns. Also users can add/remove more. Like creating a table dynamically. And also, I needed to load data from the datastore.
Although I was building and assigning a similar value (e.g: Values from data store --> State = FL, City = Tampa; Therefore --> { state : 'FL', city : 'Tampa' }), angularjs wasn't able to match the value. I tried diff ways, like just assigning { city : 'Tampa' } or 'Tampa' or and or and or...
So what I did.. and I know is sort of nasty but works so far.. is to write a lookup function to return the value from $scope.locations. Thus I have:
$scope.lookupLocation = function(state, city){
for(var k = 0; k < $scope.locations.length; k++){
if($scope.locations[k].state == state && $scope.locations[k].city == city)
return $scope.locations[k];
}
return $scope.locations[0]; //-- default value if none matched
}
so, when I load the data from the datastore (data in json format) I call the lookupLocation function like:
$scope.city = $scope.lookupLocation(results[indexFromSomeLoop].location.state, results[indexFromSomeLoop].location.city);
And that preselects my values when loading data. This is what worked for me.
Thanks