AngularJS将选定的选项从对象数组绑定到仅存储id的模型

时间:2015-04-23 15:28:32

标签: javascript angularjs

我是Angular的新手,我需要进行健全性检查。我有一个对象myObject.colorId,它只存储类型的清单列表的id $scope.colors = [{id:1, name:"blue"}, ...]。然后我有一个类型为<select>的对象数组,其中包含每种类型的id / name。我有一个myObject.colorId填充了这些类型,我想将它们绑定到{ id: 3, name: 'white' },但它不适用于我。

我可以通过将完整类型(例如myObject)存储为$scope.colors = [ { id: 9, name: 'black' }, { id: 3, name: 'white' }, { id: 5, name: 'red' }, { id: 4, name: 'blue' }, { id: 7, name: 'yellow' }]; // Works $scope.myColor = $scope.colors[2]; // red // Doesn't work, do I really have to keep // track of the full color object in myObject // like myObject.color = { id: 5, name: 'red' }; // and not simply the color id? $scope.myObject = { colorId: 5 }; 中的属性来使其工作,但这似乎不正确。或者也许我是一个新手,我错过了一些关于AngularJS的完全基本的东西。 :)

这是一个关于plunker的链接: http://plnkr.co/edit/iM5jjeqooQgAn6XGYoL2

以下是我的代码的要点:

控制器:

<!-- Works -->
<select 
    ng-model="myColor" 
    ng-options="color.name for color in colors track by color.id">
</select>

<!-- Doesn't Work -->
<select 
    ng-model="myObject.colorId" 
    ng-options="color.name for color in colors track by color.id">
</select>

查看:

[xml]$XML01 = Get-Content -Path 'C:\TEMP\XMLRecord01.xml'
[xml]$XML02 = Get-Content -Path 'C:\TEMP\XMLRecord02.xml'


$Nodes2Add = $XML02.SelectNodes("XMLHost")

foreach($XMLHost in $Nodes2Add)
{
    $Node = $XML02.ImportNode($XMLHost, $false)
    $XML01.AppendChild($Node)
}

$XML01.Save('C:\temp\XMLMergeTest.txt')

2 个答案:

答案 0 :(得分:2)

使用此代码并查看plunker

<select ng-model="myObject.colorId" ng-options="color.id as color.name for color in colors">
</select>

答案 1 :(得分:1)

track by仅在angular后面使用,以了解如何在彼此之间绑定范围。当某个值可以等于时,您可以在ng-repeat内使用它。例如:[1, 1, 3]

如果您尝试迭代前一个数组,它将失败,因为angular将跟踪更改,其中键是值。在这种情况下,按ID进行跟踪很有用。

在你的情况下,你离解决方案不远:

<!-- Works -->
<select 
  ng-model="myColor" 
  ng-options="color.id as color.name for color in colors track by color.id">
</select>