web-dev-qa-db-ja.com

AngularJSで動的なng-model名を設定する

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

uniqueListsというオブジェクトがあります。これは次のようになります。

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

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

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はこれを解析せず、すべてのフォームのモデルを文字列uniqueLists[index][0]にします。

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

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

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

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

Angularの奇妙な癖のようですが、コントローラーに接続する前にブラウザーでng-modelの名前をチェックしていて、オブジェクトを正しい値で解析していなかったため、これは私をつまずかせました。私はそれが機能していないと思いました。

javascriptangularjsangularjs-ng-repeatmapping-model
13
JVG

私はまだあなたのすべての問題を完全に理解したかどうかはわかりませんが、それでもこのコードを提供します： http://jsfiddle.net/DotDotDot/7AU6A/1/

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

実際に動作しているのを見ると、かなり単純です（値はフィドルの下部に表示されます）。チェックボックス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;
     }
}

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

それはあなたが望んでいたことですか？

10
DotDotDot

@点点々

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

この例では、ng-modelは動的である必要があります。たとえば、selectedData_A_1、selectedData_B_2、selectedData_C_3、e.t.c.。

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

enter image description here

0
ViPup