代码之家 › 专栏 › 技术社区 › trubliphone

angularjs双向绑定内ng重复

angular-ngmodel angularjs-ng-repeat angularjs

trubliphone · 技术社区 · 7 年前

我有一个角度控制器变量,定义了我想要在模板中渲染的一系列字段的外观。我的基础模型的初始值正确地显示在输入元素中,但当我更改该元素的内容时,它不会更改。

以下是一些代码:

应用程序。js公司

(function() {
  var app = angular.module("my_app", []);
    app.controller("MyController", function() {
      var my_controller = this;
      my_controller.model = {
        "first_name": "fred",
        "last_name": "jones"
      }
      my_controller.fields = [
         {
          "name": "first_name",
          "label": "First Name",
          "is_required": true,
          "model": my_controller.model.first_name
         },
        {
          "name": "last_name",
          "label": "Last Name",
          "is_required": true,
          "model": my_controller.model.last_name
         }
       ]
})();

样板html:

<div ng-app="my_app">
  <div ng-controller="MyController as my_controller">
    <div ng-repeat="field in my_controller.fields">
      {% verbatim ng %}
        <label for="id_{{ field.name }}" ng-class="field.is_required ? 'required' : 'optional'">{{ field.label }}:&nbsp;</label>
        <input type="{{ field.type }}" class="form-control" name="{{ field.name }}" id="id_{{ field.name }}" ng-model="field.model">
      {% endverbatim ng %}
     </div>
  </div>
</div>

(不要担心“{%verbatim ng%}”之类的东西-我正在使用Django的b/c就在那里。)

这将正确显示初始值分别为“fred”和“jones”的两个输入字段。但当我更改这些字段中的值时,对 my_controller.model

有什么提示吗?

谢谢

1 回复 | 直到 7 年前

Stanislav Kvitash 7 年前

这样做 "model": user_controller.model.first_name 将只为 model 字段,它不会创建对的引用 my_controller.model.field_name .

bracket notation 修改 my_controller.model 领域:

angular.module('app', [])
.controller('testController',
  function testController($scope) {
  
      var my_controller = this;
      
      my_controller.model = {
        first_name: "fred",
        last_name: "jones"
      };
      
      my_controller.fields = [
         {
          "name": "first_name",
          "label": "First Name",
          "is_required": true
         },
        {
          "name": "last_name",
          "label": "Last Name",
          "is_required": true
         }
       ];
       
});

<body ng-app="app">
<div class="table-responsive" ng-controller="testController as my_controller">
      <div ng-repeat="field in my_controller.fields">
  
        <label for="id_{{ field.name }}" ng-class="field.is_required ? 'required' : 'optional'">{{ field.label }}:&nbsp;</label>
        <input type="{{ field.type }}" class="form-control" name="{{ field.name }}" id="id_{{ field.name }}" ng-model="my_controller.model[field.name]">

     </div>
     -----------------------------------
     <br/>
     <code>{{my_controller.model}}</code>
</div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

推荐文章

Yeenkash · 我的angular ng repeat div在浏览器中添加了注释[关闭]

6 年前

mBo · Angularjs svg图形ng在范围内重复

6 年前

Harish Kumar · angular js:单击products list build内数量增加和减少按钮的事件,ng repeat反映每个列表数量编号

6 年前

Juan I. Morales Pestana · 错误:[$注入器:unpr]rangeFilterProvider中出错

6 年前

ASP.net and angularjs · 无法从代码中看到使用AngularJS动态创建的文本框的值

6 年前

amacdonald · 如果长度>0时正确显示,但长度==0时不显示,则为ng

6 年前

user9130953 · ng repeat下拉列表,以限制多次选择相同的值

6 年前

Ro_nair · 具有Angular JS和MySql的表显示重复的中继器键

6 年前

Celia · ng模型的Angularjs动态名称

6 年前

Güney SaramalÄ± · 如果动态加载页面,则Ng repeat不起作用

6 年前