使用ng模型angularjs时不显示表单值

Question

我得到了一个用于编辑产品的表单，值显示在检查器中，但没有显示在表单中。当我从代码中删除ng模型时，它们确实会显示。

在这一行中，值显示在检查元素中，但不以的形式显示

<input type="text" class="form-control" placeholder="Product naam" 
value="{{product.title}}" ng-model="formData.title"/>

在这一行中，值显示在检查元素中，形式为：

<input type="text" class="form-control" placeholder="Product naam" 
value="{{product.title}}"/>

然而，我需要ng模型来传递数据。

有什么建议吗？

Answer 1

您不需要输入标记中的value属性。ng模型已经为您绑定了。如果您在控制器中定义formData.title，它将反映您输入的值。

同样，如果用户更改输入的值，它将反映在控制器中声明的值上。

这就是著名的AngularJS的双向数据绑定。框架的一个令人敬畏且危险的功能

看看这个Fiddle:

http://jsfiddle.net/relferreira/kLcqwuqf/

HTML:

<div ng-app="app">
  <div ng-controller="MainController">
    <input type="text" data-ng-model="test">
  </div>
</div>

JS:

angular.module('app', []);
angular.module('app')
    .controller('MainController', mainController)
mainController.$inject = ['$scope'];
function mainController($scope){
  $scope.test = 'value of the input'
}

Answer 2

如果是data-ng-model="form.test"，则如何在输入框中填充其值。只需修改Renan的答案，它将帮助您更容易地理解解决方案。

    angular.module('app', []);
    angular.module('app')
      .controller('MainController', mainController)
     mainController.$inject = ['$scope'];
    function mainController($scope) {
      $scope.form = {};
      $scope.form.test = 'value of the input'
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MainController">
    <input type="text" data-ng-model="form.test">
  </div>
</div>