13

私のユースケースは少し異なりますが、同様の質問がこことここにあります。

uniqueLists次のようなオブジェクトがあります。

$scope.uniqueLists - {
    name: [
            'string1',
            'string2',
            'string3'
            // Lots of strings
    ],
    Category: [
            'string1',
            'string2',
            'string3'
            // Lots of strings
    ],
    designer: [
            'string1',
            'string2',
            'string3'
            // Lots of strings
    ]
}

このリストから検索機能を構築しようとしています。現在、このようにページ上のチェックボックスにすべてのリスト項目を表示できます(次のコードはJadeNode/ExpressJS のテンプレート エンジンを使用しています。慣れていなくても簡単に理解できます。 Indent == の子ノードその上の行）

div(class="searchNav")
    p(ng-repeat="param in searchParams") {{param[0] + ' = ' + param[1]}}

    div.row-fluid(ng-repeat="(key,val) in uniqueLists")
        form(ng-model="???") {{key}}
            label.checkbox(ng-repeat="value in val")
                input(type="checkbox", ng-model="?????") 
                {{value}}

私が問題を抱えている唯一の部分はng-model、フォームとチェックボックスです。が欲しいformですng-model == {{key}}。私はそれを設定しようとしましたが、それはAngularを壊します。私も試しましng-model='uniqueLists[index][0]'たが、Angular はこれを解析せず、すべてのフォームのモデルを string にしますuniqueLists[index][0]。

チェックボックスと同じようinputに、私はそれらが欲しいng-model="{{value}}". おそらく私のコントローラーでこれを行う方法はありますか？内部で動作するものは考えられませんng-repeat。

この質問につまずいた人への小さなメモ

以下の回答/フィドルでわかるように、オブジェクト/位置を参照すると、DOM で正しい名前にレンダリングされませんng-modelが、Angular ではあたかもそうであるかのように動作するようです。

たとえば、上記のコードでは、設定ng-model="uniqueLists[key][val]"すると DOM では としてレンダリングされますがng-model="uniqueLists[key][val]"、 であるかのように動作しますng-model="uniqueLists[name][string1]"。

Angular の奇妙な癖のようですng-model。コントローラーに接続する前にブラウザーで名前を確認していたため、これにつまずきました。オブジェクトを解析して正しい値を取得していないことがわかったとき、そうであると想定しました。動作しています。

4

2 に答える 2

10

私はまだあなたの問題をすべて理解しているとは確信していませんが、それでもこのコードを提供します: http://jsfiddle.net/DotDotDot/7AU6A/1/

少し説明するために、(一意の文字列を作成するために) 少し変更したデータ サンプルを使用し、定義済みの {{value}} に単純に等しいモデルを作成する代わりに、すべてのモデルをオブジェクトに入れました。 object[key][value] (あなたの場合は object['name']['string1'] のようなもの) に簡単に移動でき、それらの値をチェックボックスに関連付けました。私がしなければならなかった唯一のことは、データ サンプル オブジェクトから作成することでした。そのため、コントローラーはすべてのデータを 1 回解析する必要があります。

実際の動作を見ると非常に単純です (値はフィドルの下部に表示されます)。チェックボックス name=> string2 をクリックすると、object['name']['string2'] の値はチェックボックスの状態に対応し、ng-model によって自動的に監視されます。

これがあれば、コントローラーで各チェックボックスを変更するのは非常に簡単です。そのため、実際にそれを表示するために小さな検索機能を追加しました。検索ボックスでスペースで区切られた単語のリストを検索し、検索は一致するチェックボックスをチェックします

HTML 側では大きな変更はありません (申し訳ありませんが、私はあなたのテンプレートに精通していません。それはそのままの HTML になります)。

    <div ng-repeat='(key,val) in uniqueLists'>
       <form name='{{key}}'>
       {{key}}
            <p ng-repeat='value in val'>
                <input type='checkbox' ng-model='selectedData[key][value]' />{{value}}
            </p>
        </form>

    </div>

コントローラ側では、これがモデルを初期化する方法です:

$scope.selectedData={};
for (var i in $scope.uniqueLists)
{
 $scope.selectedData[i]={}
     for(var j in $scope.uniqueLists[i])
     {
         $scope.selectedData[i][$scope.uniqueLists[i][j]]=false;
     }
}

最後の部分、検索機能は、すべての検索/モデル値を反復するためのループのみで構成されています。これは、独自の検索コントローラーに一致させるために変更する必要があるものだと思います

それはあなたが望んでいたものですか？

于 2013-07-28T15:16:20.867 に答える
0

@点点々

私は _dynamic_names_ で同じ pb に直面しており、Q の作成者を完全に理解しています。あなたの例では、(!) 送信を除いて、ほとんどすべてが正常に動作します。添付のスクリーンショットをご覧ください。

この例では、ng-model は次のように動的でなければなりません: selectedData_A_1、selectedData_B_2、selectedData_C_3 など ...

...その場合のみ、HTML-Form-Submit を使用する場合、名前に関連してチェックボックスの値をデコードできます。

ここに画像の説明を入力

于 2014-09-16T13:21:08.620 に答える