0

次のようなデータセットにバインドされた同様のオブジェクトの束を表示するカスタムコントローラーを作成しようとしています。

[{name: card1, values: {opt1: 9, opt2: 10}},{name: card1, values: {opt1: 9, opt2: 10}}]

各カードの名前と値の1つ（画面上でそれぞれの正方形として表されます）を表示したいと思います。ユーザーがオプション1またはオプション2のボタンをクリックしたかどうかに応じて、1つの値のみが表示されます。 ng-repeatを使用するときに表示される値を変更する方法に固執しています。

htmlコード：

<div ng-controller="aggViewport" >
<div class="btn-group">
    <button class="btn active">opt1</button>
    <button class="btn">opt2</button>
</div>
<div id="container" iso-grid width="500px" height="500px">
    <div ng-repeat="card in cards" class="item {{card.class}}">
        <table width="100%">
            <tr>
                <td align="center">
                    <h4>{{card.name}}</h4>
                </td>
            </tr>
            <tr>
                <td align="center"><h2>{{card.opt1}}</h2></td>
            </tr>
        </table>        
    </div>
</div>

コントローラ：

module.controller('aggViewport',['$scope','$location',function($scope,$location){
$scope.cards = [{name: card1, values: {opt1: 9, opt2: 10}},{name: card1, values: {opt1: 9, opt2: 10}}];


}]);
4

1 に答える 1

4

これがあなたの問題に対する可能な解決策です

<div ng-controller="aggViewport" >
<div class="btn-group" >
    <button ng-click="setOption(opt.name)" ng-repeat="opt in optList" class="btn active">{{opt.name}}</button>
</div>
<div id="container" iso-grid width="500px" height="500px">
    <div ng-repeat="card in cards" class="item {{card.class}}" ng-controller="aggCardController">
        <table width="100%">
            <tr>
                <td align="center">
                    <h4>{{card.name}}</h4>
                </td>
            </tr>
            <tr>
                <td align="center"><h2>{{getOption()}}</h2></td>
            </tr>
        </table>        
    </div>
</div>

そしてあなたのコントローラーで：

module.controller('aggViewport',['$scope','$location',function($scope,$location){
$scope.cards = [{name: card1, values: {opt1: 9, opt2: 10}},{name: card1, values: {opt1: 9, opt2: 10}}];

$scope.option = "opt1";

$scope.setOption = function(val){
$scope.option = val;
}

}]);

module.controller('aggCardController',['$scope',function($scope){

$scope.getOption = function(){
return $scope.card.values[$scope.option];
}

}]);

ここで何が起こっているのかを説明するだけです。ng-repeatを使用すると新しいスコープが作成されるため、aggCardControllerは個別に定義されます。また、ng-repeatを使用してコントローラーを導入すると、そのスコープを制御するコントローラーが作成されます。これで、各スコープに個別にアクセスできるようになりました。また、作成されたスコープごとに新しいコントローラーが作成されます。HTMLでは、aggCardControllerはaggViewPort内にあるため、親スコープからプロパティを継承します。したがって、aggViewPortでオプションを宣言すると、すべての子スコープに継承されます。

この新しいコントローラーをここに導入する理由は、このステートメントのためです

return $scope.card.values[$scope.option];

ここで$scope.cardにアクセスしようとしているので、カードはリピーターで作成された新しい変数であることを思い出してください。この新しい変数は、リピーターによって作成された子スコープでのみ使用できます。$ scope.cardにアクセスする必要がない場合は、親スコープでこのgetOption（）関数を作成することもできます。

また、javascriptのすべてのオブジェクトは連想配列であることに注意してください。これが、配列アクセス演算子[]を使用してopt1またはopt2の値にアクセスする理由です。

お役に立てれば。

于 2012-08-13T15:41:45.533 に答える