将ng-model绑定到ng-repeat不起作用

Binding ng-model to ng-repeat not working

本文关键字：ng-repeat 不起作用 绑定 ng-model      更新时间：2023-09-26

我试图将ng-model与ng-repeat动态绑定，但它似乎不起作用。输入。占位符和输入。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',
  },
];

我得到的错误

错误链接

请帮

ng-model未被插值;你不应该用{{包裹它。

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

应该可以正常工作。

编辑:对不起，我没有看到你试图动态设置ng模型——我的道歉。

最简单的解决方案是使用accountInfo中的引用，如果user在该作用域中可用:

    $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只接受一个引用，所以你所能做的就是对它进行修改。

相关文章：