Question

我刚刚开始在Angular中进行实验，并且对使用ng-repeat最好地接近绑定感到困惑。我基本上得到关于ng-repeat创建子范围的观点。我的问题更基本:)对于像这样的HTML：

<div ng-controller="swatchCtrl" class="swatch-panel">
    Swatches
    <ul>
        <li ng-repeat="swatch in swatchArray" class="swatch">
            <input
                type="radio"
                name="swatches"
                ng-model="$parent.currentSwatch"
                value="{{swatch}}"              
            >
            <label class="swatch-label">
                <div class="swatch-color" style="background-color: #{{swatch.hexvalue}};"></div
                ><span class="swatch-name">{{swatch.colorName}}</span> 
            </label>
        </li>
    </ul>

    currentSwatch is:
    <pre>{{currentSwatch | json}}</pre>

    currentSwatchObj is:
    <pre>{{currentSwatchObj | json}}</pre>
        how do I tell this to fire??

    swatchArray is:
    <pre>{{swatchArray | json}}</pre>
</div>

和javascript这样：

function swatchCtrl($scope) {
    $scope.swatchArray = [
        {colorName:'Red', hexvalue: 'ff0000', selected: 'false'},
        {colorName:'Green', hexvalue: '00ff00', selected: 'false'},
        {colorName:'Blue', hexvalue: '0000ff', selected: 'false'}
    ];

    $scope.currentSwatch = {};
}

http://jsfiddle.net/8VWnm/

我想：

a）当用户点击单选按钮时，我希望它设置currentSwatch对象的colorName和hexvalue属性。现在，绑定似乎是从数组中给我一个字符串化的对象。如何观看currentSwatch的返回，以便将其解析回可用对象？很简单，我知道，但我错过了什么？

b）当用户点击单选按钮时，我想我希望将原始数组中相应“selected”键的值设置为“true”。反之亦然，取消选中。假设在调色板中一次只能选择一个样本。（理论上，我希望能够在以后迭代数组，假设不同的键和值有时可能不是唯一的。）

这种东西使用jquery方法非常容易，但我想学习惯用的角度方式。提前感谢您的帮助。

Answer 1

http://jsfiddle.net/8VWnm/54/

我没有收听ng-click事件，而是将所选元素的索引设置为一个名为＆＃34; currentSwatchIndex＆＃34;

的变量

<li ng-repeat="swatch in swatchArray" class="swatch">
    <input
        type="radio"
        ng-model="$parent.currentSwatchIndex"
        value="{{$index}}"              
    >
</li>

您可以在控制器中监视currentSwatchIndex的$ watch值，并在此$ watch函数中设置所选的swatch-Object和选择状态：

$scope.$watch('currentSwatchIndex', function(newValue, oldValue) {
    $scope.currentSwatchObj = $scope.swatchArray[newValue];
    $scope.swatchArray[newValue].selected = true;
    $scope.swatchArray[oldValue].selected = false;
});

只知道currentSwatchIndex应足以识别所选的swatchObject。因此，您可以摆脱currentSwatchObj和swatchArray的selected属性。您始终可以通过数组访问以编程方式获取选定的样本。

Answer 2

对于未来可以来这里做同样选择的用户，你不需要使用任何索引，select必须这样做： http://docs.angularjs.org/api/ng.directive:select

Angular：如何使用ng-repeat绑定到整个对象

2 个答案: