BinaryDevelop
  1. ホーム
  2. angularjs

[解決済み] ng-model、ng-repeat、およびinputの難しさ

2022-05-18 08:50:01

質問

私は、ユーザーが項目のリストを編集できるようにしようとしています。 ngRepeat と ngModel . ( このフィドルを見る .) しかし、私が試した両方のアプローチは奇妙な動作につながります。1つはモデルを更新せず、もう1つはキーダウンのたびにフォームをぼかすのです。

私はここで何か間違ったことをしているのでしょうか? これはサポートされていない使用例なのでしょうか?

以下は、便宜上コピーした、fiddleからのコードです。 

<html ng-app>
    <head>
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
    </head>
    <body ng-init="names = ['Sam', 'Harry', 'Sally']">
        <h1>Fun with Fields and ngModel</h1>
        <p>names: {{names}}</p>
        <h3>Binding to each element directly:</h3>
        <div ng-repeat="name in names">
            Value: {{name}}
            <input ng-model="name">                         
        </div>
        <p class="muted">The binding does not appear to be working: the value in the model is not changed.</p>
        <h3>Indexing into the array:</h3>
        <div ng-repeat="name in names">
            Value: {{names[$index]}}
            <input ng-model="names[$index]">                         
        </div>
        <p class="muted">Type one character, and the input field loses focus. However, the binding appears to be working correctly.</p>
    </body>
</html>

どのように解決するのですか？

バインディングの問題だと思われます。

アドバイスとしては プリミティブにバインドしない .

あなたの ngRepeat はコレクション内の文字列を反復処理するもので、本来はオブジェクトを反復処理するものです。この問題を解決するには 

<body ng-init="models = [{name:'Sam'},{name:'Harry'},{name:'Sally'}]">
    <h1>Fun with Fields and ngModel</h1>
    <p>names: {{models}}</p>
    <h3>Binding to each element directly:</h3>
    <div ng-repeat="model in models">
        Value: {{model.name}}
        <input ng-model="model.name">                         
    </div>

jsfiddle http://jsfiddle.net/jaimem/rnw3u/5/

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します