AngularJS set default value of an array of radio buttons by a nested id property?
Question
See the JSFiddle .
In AngularJS 1.2, I'm trying to find out if its possible to refer to an object in an array by using a nested data id (string) instead of an array index (integer)?
Here's my data:
$scope.sizes = [
{"dataId":"sm","label":"Small","price":8},
{"dataId":"med","label":"Medium","price":10},
{"dataId":"lg","label":"Large","price":11}
];
$scope.colors = [
{"dataId":"red","label":"Brick Red","price":41},
{"dataId":"blue","label":"Royal Blue","price":32},
{"dataId":"green","label":"Forest Green","price":35}
];
I want to pre-populate the models with selected profile:
var coolShoe = {
label:"Cool Shoe",
size:"lg",
color:"red"
}
I know how to set values with array indexes:
$scope.myShoe.size = $scope.sizes[2];
$scope.myShoe.color = $scope.colors[0];
But I want to do something like this (doesn't work):
$scope.myShoe.size = $scope.sizes.indexOf(coolShoe.size);
$scope.myShoe.color = $scope.colors.indexOf(coolShoe.color);
Is something like possible? Do I have the wrong data structure? Am i totally overlooking the obvious? Thanks in advance! Aaron
2 answers
solution1
0 ACCPTED 2014-06-10 04:10:08
The code is using indexOf() to search for a string in an array of objects and it won't find it (and not to mention indexOf() returns an index, not the item).
You can write a function to search the array yourself. Another way to do this is to leverage the built in angular filter to search each array by dataId ...
controllers.controller('myController', function($scope, $filter){
// ...
var coolShoe = {
label:"Cool Shoe",
size:"lg",
color:"red"
};
$scope.myShoe.size = $filter('filter')($scope.sizes, { 'dataId': coolShoe.size })[0];
$scope.myShoe.color = $filter('filter')($scope.colors, { 'dataId': coolShoe.color })[0];
});
solution2
0 2014-06-10 04:43:10
Though I'm not sure if it is good design you can achieve it with filters. Checkout the complete JS Bin . This will be your html:
<html ng-app="App">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"> </script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div ng-controller="MainCtrl">
<!-- can loop true with ng-repeat but just showing first item below -->
<p>Size: {{myShoe.size[0].label}}</p>
<p>Color: {{myShoe.color[0].label}}</p>
</div>
<script src="app.js"></script>
</body>
</html>
and your javascript "app.js":
angular.module("App", [])
.controller("MainCtrl", function($scope, $filter) {
$scope.sizes = [
{"dataId":"sm","label":"Small","price":8},
{"dataId":"med","label":"Medium","price":10},
{"dataId":"lg","label":"Large","price":11}
];
$scope.colors = [
{"dataId":"red","label":"Brick Red","price":41},
{"dataId":"blue","label":"Royal Blue","price":32},
{"dataId":"green","label":"Forest Green","price":35}
];
$scope.coolShoe = {
label:"Cool Shoe",
size:"lg",
color:"red"
};
$scope.myShoe = {};
$scope.myShoe.size = $filter('filter')($scope.sizes, $scope.coolShoe.size);
$scope.myShoe.color = $filter('filter')($scope.colors, $scope.coolShoe.color);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.