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）ユーザーがラジオボタンをクリックすると、元の配列の対応する「選択された」キーの値を「true」に設定したいと思います。チェックを外す場合はその逆です。パレットで一度に選択できるスウォッチは 1 つだけだとしましょう。(理論的には、異なるキーと値が一意ではない可能性が高いと仮定して、後で配列を反復処理できるようにしたいと考えています。)

このちょっとしたことは、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>

コントローラーで 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;
});

選択した swatchObject を識別するには、currentSwatchIndex を知るだけで十分です。したがって、おそらく currentSwatchObj と swatchArray の選択されたプロパティを取り除くことができます。配列アクセスを使用して、選択したスウォッチをプログラムでいつでも取得できます。

于 2013-06-18T09:25:02.663 に答える
1

選択で同じことを行うためにここに来る可能性のある将来のユーザーのために、インデックスを使用する必要はありません。選択は次のように行う必要があります: http://docs.angularjs.org/api/ng.directive:select

于 2013-07-24T09:04:21.160 に答える