Question

我试图用ng-repeat动态绑定ng-model，但它似乎不起作用。 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-model - 我的道歉。

最简单的解决方案是使用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只接受引用，因此基本上可以合理地做出各种变化。

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

1 个答案: