ng-modelをng-repeatにバインドしても動作しない

Question

ng-modelをng-repeatと動的にバインドしようとしていますが、動作しないようです。 input.placeholderとinput.faはどちらも期待通りに動作しますが、ng-modelを何かにバインドすることができないので、エラーが発生します。

関連するHTMLオブジェクトの

<li class="animate-repeat" ng-repeat="input in accountInfo"> 
    <div class="input-group input-group-icon"> 
    <input type="text" placeholder="{{input.placeholder}}" ng-model="{{input.model}}"/> 
    <div class="input-icon"><i class="fa {{input.fa}}"></i></div> 
    </div> 
</li> 

マイaccountInfoの配列。

$scope.accountInfo = [ 
    { 
    model: 'user.fullName', 
    placeholder: 'Full Name', 
    fa: 'fa-user', 
    }, 
    { 
    model: 'user.email', 
    placeholder: 'Email Address', 
    fa: 'fa-envelope', 
    }, 
    { 
    model: 'user.password', 
    placeholder: 'Password', 
    fa: 'fa-key', 
    }, 
    { 
    model: 'user.phone', 
    placeholder: 'Phone Number', 
    fa: 'fa-phone', 
    }, 
]; 

私は

error link

を取得エラー

Answer 1

ng-modelが補間されていません助けてください。 {{にラップしないでください。したがって、

<input ... ng-model="input.model"> 

は正常に動作するはずです。

---

編集：申し訳ありませんが、申し訳ありませんが、あなたは動的にngモデルを設定しようとしていました。

最も簡単な解決策はuserはそのスコープで利用可能な場合、accountInfoで参照を使用することです：

$scope.accountInfo = [{ 
     model: user.fullName, 
     placeholder: 'Full Name', 
     ... 

そうでない場合、あなたは$scope上のオブジェクトを宣言し、手動でモデルにリンクすることができます

// ... some place without access to `user` 
$scope.accountInfo = [{ 
    model: 'fullName', 
    placeholder: 'Full Name', 
    ... 

// some place with access to `user` 
$scope.inputs = { 
    fullName: user.fullName, 
    email: user.email, 
    ... 
}; 

// html 
<input ... ng-model="inputs[input.model]"> 

ng-modelは参照のみを受け入れるため、このバリエーションは本質的にすべて可能です。