我们如何在角度模型中使用ng模型中的未定义属性

时间:2016-03-27 19:58:27

标签: angularjs

刚刚得到一个代码并看到代码正在运行,但在ng-model作者使用user.name或user.email等但这些属性从未在控制器中声明.........那么如何它有效吗?

我们如何以这种方式将用户信息传递给控制器​​功能ng-click="update(user)"

<div ng-controller="ExampleController">
  <form novalidate class="simple-form">
    Name: <input type="text" ng-model="user.name" /><br />
    E-mail: <input type="email" ng-model="user.email" /><br />
    Gender: <input type="radio" ng-model="user.gender" value="male" />male
    <input type="radio" ng-model="user.gender" value="female" />female<br />
    <input type="button" ng-click="reset()" value="Reset" />
    <input type="submit" ng-click="update(user)" value="Save" />
  </form>
  <pre>user = {{user | json}}</pre>
  <pre>master = {{master | json}}</pre>
</div>

<script>
  angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.master = {};

      $scope.update = function(user) {
        $scope.master = angular.copy(user);
      };

      $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
      };

      $scope.reset();
    }]);
</script>

1 个答案:

答案 0 :(得分:2)

HTML中的ng-model="user.gender"代码指的是控制器中的$scope.user.gender

由于已经定义了$scope.user,因此angular会自动设置该对象上的gender属性。 user.emailuser.name属性也是如此。

当您致电ng-click="update(user)"时,update(user)update($scope.user)相同。

This section of the angular tutorial更好地解释了$scope变量如何工作以及如何在模板中访问它,我建议您阅读它,但这是一个快速的例子:

  

Angular中范围的概念至关重要。范围可以看作是允许模板,模型和控制器一起工作的粘合剂。 Angular使用范围以及模板,数据模型和控制器中包含的信息来保持模型和视图分离,但是同步。对模型所做的任何更改都会反映在视图中;视图中发生的任何更改都会反映在模型中。