AngularJS通过嵌套的id属性设置单选按钮数组的默认值吗？

Question

See the JSFiddle . 参见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)? 在AngularJS 1.2中，我试图找出是否有可能通过使用嵌套数据ID（字符串）而不是数组索引（整数）来引用数组中的对象？

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 亚伦

Answer 1

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). 代码使用indexOf()在对象数组中搜索字符串，但找不到它（更不用说indexOf()返回索引，而不是项目）。

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 ... 另一种方法是利用内置的角度过滤器通过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];

});

JSFiddle JSFiddle

Answer 2

Though I'm not sure if it is good design you can achieve it with filters. 尽管我不确定这是不是一个好的设计，但是可以使用过滤器来实现。 Checkout the complete JS Bin . 检出完整的JS Bin 。 This will be your html: 这将是您的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": 和您的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);
});

AngularJS通过嵌套的id属性设置单选按钮数组的默认值吗？

问题描述

2 个解决方案

解决方案1
0 已采纳 2014-06-10 04:10:08

解决方案2
0 2014-06-10 04:43:10

AngularJS通过嵌套的id属性设置单选按钮数组的默认值吗？

问题描述

2 个解决方案

解决方案1 0 已采纳 2014-06-10 04:10:08

解决方案2 0 2014-06-10 04:43:10

解决方案1
0 已采纳 2014-06-10 04:10:08

解决方案2
0 2014-06-10 04:43:10