表单输入 ng-value 似乎已填充但为空

Question

我正在构建一个 AngularJS 应用程序。我对填有 ng 值的表单有疑问。

输入字段已填写，用户可以看到文本，但当用户按下 'change' 按钮时，它变为未定义。有什么想法吗？

我的控制器代码：

// Fictional data it wineById will be a JSON object.
$scope.wineById = {"id":"4","name":"fdfvs1","percentage":"vcxz1"}

$scope.edit = function () {
    var wine = {
        id:$scope.wineById.id,
        name:$scope.name,
        percentage:$scope.percentage
    };

    console.log($scope.name, $scope.percentage);
};

HTML:

<form novalidate ng-submit="edit()">
        <label>ID wine: <input type="text" ng-value="wineById.id" ng-model="id" ng-disabled="true"></label> <br>
        <label>Name wine: <input type="text" ng-value="wineById.name" ng-model="name"></label> <br>
        <label>Percentage wine: <input type="text" ng-value="wineById.percentage" ng-model="percentage"></label> <br>

        <input type="submit" value="Change">
</form>

案例一：

我的字段中已有输入。按下按钮而不更改字段中的输入数据。一切都变得不确定。

案例 2（有效的案例）：

我的字段中已有输入。更改具有不同数据的所有字段并按下按钮。一切都变了。

如何解决案例 1？

Answer 1

如果出于任何原因仍想使用 ng-value，请按以下方式更改 html：

<form novalidate ng-submit="edit()">
  <label>ID wine:
   <input type="text" ng-init="id=wineById.id" ng-model="id" ng-value="wineById.id" ng-disabled="true">
  </label>
  <br>
  <label>Name wine:
    <input ng-init="name=wineById.name" type="text" ng-value="wineById.name" ng-model="name">
  </label>
  <br>
  <label>Percentage wine:
    <input ng-init="percentage=wineById.percentage" type="text" ng-value="wineById.percentage" ng-model="percentage">
  </label>
  <br>
  <input type="submit" value="Change">
</form>

更好的方法是只使用 ng-model（除非您不想要双向绑定）

<form novalidate ng-submit="edit()">
    <label>ID wine:
      <input type="text" ng-model="wineById.id" ng-disabled="true">
    </label>
    <br>
    <label>Name wine:
      <input type="text" ng-model="wineById.name">
    </label>
    <br>
    <label>Percentage wine:
      <input type="text" ng-model="wineById.percentage">
    </label>
    <br>

    <input type="submit" value="Change">
</form>

Live Demo

Answer 2

为什么要使用 ng-value，angular 支持双向绑定，ng-model 足以绑定数据。

<form novalidate ng-submit="edit()">
    <label>ID wine: <input type="text" ng-model="id" ng-disabled="true"></label> <br>
    <label>Name wine: <input type="text" ng-model="name"></label> <br>
    <label>Percentage wine: <input type="text" ng-model="percentage"></label> <br>

    <input type="submit" value="Change">
</form>

表单输入 ng-value 似乎已填充但为空

Form input ng-value seems filled but is empty

javascript

forms

angularjs

angularjs-ng-value