Question

我有一个用于编辑产品的表单，该值显示在检查器中，但不在表单中。当我从代码中删除ng-model时，它们会显示。

在此行中，值显示在inspect元素中，但不是以下列形式：

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

在此行中，值显示在inspect元素中，格式为：

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

但是我需要ng-model来传递数据。

有什么建议吗？

Answer 1

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

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

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

看看这个小提琴：

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的答案，这样就可以帮助您更轻松地理解解决方案。

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用ng-model angularjs

2 个答案: