Question

我正在使用Angular生成一些input并使用ng-repeat使用数据填充它们。我还想将input中的数据绑定到save changes按钮，该按钮接受ng-model指令提供的参数。 save changes按钮使用内置的JS arguments对象打印传递的参数。出于某种原因，除非我更改input框内的文字，输出为[undefined, undefined]。更改input框内的文本后，将打印正确的输出。那是为什么？

JSfiddle code

HTML：

<div ng-app="myApp" ng-controller="MainCtrl">
  <p ng-repeat = "man in men">
      <label>name</label><input type="text" ng-model="mname" ng-value="man.name"><br>
      <label>status</label><input type="text" ng-model="mstatus" ng-value="man.status"><br>
      <button ng-click="save(mname,mstatus)">
      save changes
      </button>
  </p>
</div>

JS：

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.men = [{
    name: "jon snow",
    status: "depands"
  }, {
    name: "rob stark",
    status: "dead"
  }];
  $scope.save = function() {
    console.log(arguments);
  }
});

Answer 1

这不是推荐，但根据您的具体要求，您可以使用ng-init将ng-value绑定到您的模型

  <p ng-repeat = "man in men">
      <label>name</label><input type="text" ng-model="mname" ng-value="man.name" ng-init="mname = man.name"><br>
      <label>status</label><input type="text" ng-model="mstatus" ng-value="man.status" ng-init="mstatus = man.status"><br>
      <button ng-click="save(mname,mstatus)">
      save changes
      </button>
  </p>

这不会将您的更改绑定到原始模型。

Fiddle

Answer 2

ngModel不会更新，直到您使用密钥进行更改，或者从控制器进行设置。因为您使用ngValue设置输入字段，所以它不会注册到您的ngModel，直到您更改它。

这个问题类似于大多数日期选择器不能使用ngModel，因为他们使用DOM操作设置字段，而不是通过＆＃34; key＆＃34;来插入值。

您可以使用以下HTML轻松解决此问题：

<label>name</label><input type="text" ng-model="man.name"><br>
<label>status</label><input type="text" ng-model="man.status"><br>

我只是删除了ngValue并将ngModel链接到你的＆＃34; man＆＃34;。

AngularJS - ng-model传递的未更改数据被解释为未定义而不是值

2 个答案: