1

我刚刚开始在 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）当用户单击单选按钮时，我想我希望将原始数组中相应“选定”键的值设置为“真”。反之亦然取消选中。假设在调色板中一次只能选择一个样本。（理论上我希望以后能够遍历数组，假设不同的键和值有时可能不是唯一的。）

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

4

2 回答 2

2

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

我不会听 ng-click 事件，而是将所选元素的索引设置为一个名为“currentSwatchIndex”的变量

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

您可以 $watch 控制器中 currentSwatchIndex 的值更改，并在此 $watch 函数中设置选定的样本对象和选择状态：

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

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

于 2013-06-18T09:25:02.663 回答
1

对于可以来这里在选择中执行相同操作的未来用户，您不需要使用任何索引，选择必须像这样完成： http ://docs.angularjs.org/api/ng.directive:select

于 2013-07-24T09:04:21.160 回答