Javascript AngularJS的ng模型绑定说明？

ng模型绑定输入、选择、文本区域或自定义表单控件 使用创建的NgModelController访问作用域上的属性 并被该指令所暴露

但看看这段简单的代码会提出两个问题：

<div ng-app="myApp" ng-controller="MainCtrl">
     Name: <input type="text" ng-model="ctrl.name.aaa.lalala"/><input type='button' value='done'/>
    <br/><br/><br/>
    <div>
         Welcome, {{ctrl.name.aaa.lalala}}
    </div>
</div>
<script>
    function MainCtrl($scope) {}
</script>

然后它就会起作用

---

但它是这样工作的，没有预定义对象。我错过了什么

1我会创建这样一个自定义指令来保存未提交的值，并且只在单击按钮时提交它：

 app.directive("commitableValue",function(){
     return {
      require: '^ngModel',
      restrict: 'A',
      link: function(scope, element, attrs, ngModel) {
        var committed; 
        var committedValue;

        ngModel.$parsers.push(function(value){
          return committed ? value : committedValue; //return uncommitted value to the pipeline if the button is not clicked
        });

        scope.$watch(function(){ //Whenever ngModel.$modelValue changes, reset the values. This also deals with the case when another code updates the same property.
          return ngModel.$modelValue;
        },function (value){
          committedValue = ngModel.$modelValue; 
          committed = false;
        });

        scope.$on("commitValue",function(event){ 
          committed = true; //when receiving an event to commit the value, update the underlying model's property
          ngModel.$setViewValue(ngModel.$viewValue);
        });

      }
    };
  });

<input type="text" commitable-value ng-model="ctrl.name.aaa.lalala"/>

然后在单击按钮后需要保存的字段上应用此指令：

 app.directive("commitableValue",function(){
     return {
      require: '^ngModel',
      restrict: 'A',
      link: function(scope, element, attrs, ngModel) {
        var committed; 
        var committedValue;

        ngModel.$parsers.push(function(value){
          return committed ? value : committedValue; //return uncommitted value to the pipeline if the button is not clicked
        });

        scope.$watch(function(){ //Whenever ngModel.$modelValue changes, reset the values. This also deals with the case when another code updates the same property.
          return ngModel.$modelValue;
        },function (value){
          committedValue = ngModel.$modelValue; 
          committed = false;
        });

        scope.$on("commitValue",function(event){ 
          committed = true; //when receiving an event to commit the value, update the underlying model's property
          ngModel.$setViewValue(ngModel.$viewValue);
        });

      }
    };
  });

<input type="text" commitable-value ng-model="ctrl.name.aaa.lalala"/>

---

如果未定义属性，则在第一次更改值后，2 ng模型将自动为您创建属性。从第二次开始，属性已经存在，angular将只更新值。

1我将创建一个这样的自定义指令来保存未提交的值，并仅在单击按钮时提交它：

 app.directive("commitableValue",function(){
     return {
      require: '^ngModel',
      restrict: 'A',
      link: function(scope, element, attrs, ngModel) {
        var committed; 
        var committedValue;

        ngModel.$parsers.push(function(value){
          return committed ? value : committedValue; //return uncommitted value to the pipeline if the button is not clicked
        });

        scope.$watch(function(){ //Whenever ngModel.$modelValue changes, reset the values. This also deals with the case when another code updates the same property.
          return ngModel.$modelValue;
        },function (value){
          committedValue = ngModel.$modelValue; 
          committed = false;
        });

        scope.$on("commitValue",function(event){ 
          committed = true; //when receiving an event to commit the value, update the underlying model's property
          ngModel.$setViewValue(ngModel.$viewValue);
        });

      }
    };
  });

<input type="text" commitable-value ng-model="ctrl.name.aaa.lalala"/>

然后在单击按钮后需要保存的字段上应用此指令：

 app.directive("commitableValue",function(){
     return {
      require: '^ngModel',
      restrict: 'A',
      link: function(scope, element, attrs, ngModel) {
        var committed; 
        var committedValue;

        ngModel.$parsers.push(function(value){
          return committed ? value : committedValue; //return uncommitted value to the pipeline if the button is not clicked
        });

        scope.$watch(function(){ //Whenever ngModel.$modelValue changes, reset the values. This also deals with the case when another code updates the same property.
          return ngModel.$modelValue;
        },function (value){
          committedValue = ngModel.$modelValue; 
          committed = false;
        });

        scope.$on("commitValue",function(event){ 
          committed = true; //when receiving an event to commit the value, update the underlying model's property
          ngModel.$setViewValue(ngModel.$viewValue);
        });

      }
    };
  });

<input type="text" commitable-value ng-model="ctrl.name.aaa.lalala"/>

---

如果未定义属性，则在第一次更改值后，2 ng模型将自动为您创建属性。从第二次开始，属性已经存在，angular将只更新值。

我非常喜欢Khanh TO的答案，但当您有一个包含许多属性的表单时，这里有一个不同的解决方案，您可以使用这些属性更新模型，也可以不使用这些属性

假设您有一个表格来更新此模型代表的个人的个人详细信息：

{
    firstname: 'wackford',
    lastname: 'squeers',
    phone: '1234 567890'
}

您的模型包含以下几个方面：

$scope.users = [ {}, {}, {} ];

开始编辑用户时，您会将要编辑的用户复制到另一个范围属性，例如

$scope.userUnderEdit =  angular.copy( $scope.user[0] );

如果在UI上按“提交”，则会将编辑的用户复制回用户集合：

$scope.commitUserChanges = function(){
    $scope.users[0] = angular.copy( $scope.usersUnderEdit );
    // persist data etc.
}

如果用户取消编辑，则只需清除userUnderEdit：

$scope.cancelUserChanges = function(){
    $scope.usersUnderEdit = null;
}

---

演示：

我非常喜欢Khanh TO的答案，但当您有一个包含许多属性的表单时，这里有一个不同的解决方案，您可以使用这些属性更新模型，也可以不使用这些属性

假设您有一个表格来更新此模型代表的个人的个人详细信息：

{
    firstname: 'wackford',
    lastname: 'squeers',
    phone: '1234 567890'
}

您的模型包含以下几个方面：

$scope.users = [ {}, {}, {} ];

开始编辑用户时，您会将要编辑的用户复制到另一个范围属性，例如

$scope.userUnderEdit =  angular.copy( $scope.user[0] );

如果在UI上按“提交”，则会将编辑的用户复制回用户集合：

$scope.commitUserChanges = function(){
    $scope.users[0] = angular.copy( $scope.usersUnderEdit );
    // persist data etc.
}

如果用户取消编辑，则只需清除userUnderEdit：

$scope.cancelUserChanges = function(){
    $scope.usersUnderEdit = null;
}

---

---

演示：

第二个问题你也可以问一下吗？关于2，为什么人们警告我可以得到未定义的属性？请你再详细说明一下好吗？@Royi Namir:如果你不输入任何内容，ng model不会创建属性，ng model只在你第一次输入内容后创建属性。第一次输入后是什么意思？如果我第二次更改值呢？有何不同？这是同样的财产。我不明白为什么它不同。对于第二个问题，看看Angular如何为你创建属性，如果它没有设置：你能在第二个问题上也做一个确认吗？关于2，为什么人们警告我，我可以得到未定义的属性？请你再详细说明一下好吗？@Royi Namir:如果你不输入任何内容，ng model不会创建属性，ng model只在你第一次输入内容后创建属性。第一次输入后是什么意思？如果我第二次更改值呢？有何不同？这是同样的财产。我不明白为什么不同。第二个问题，看看Angular在没有设置的情况下是如何为你创建属性的：很多地方？UserEditController只需要对编辑中的用户进行3次引用；选择用户，提交更改并取消更改。简单易懂，易于测试。你能提供一个简单的解决方案吗？我没能成功，谢谢你。编辑的标题是否可能与人的旧价值有关？我不想编辑此人并在标题中看到它的更改…我添加了一个额外的作用域属性editUser，该属性引用正在编辑的用户列表中的用户。我最初使用另一种方式的原因是显示编辑用户的模型是如何更改的，而不是用户集合中的用户，直到按下“保存”按钮。很多地方？UserEditController只需要对编辑中的用户进行3次引用；选择用户，提交更改并取消更改。简单易懂，易于测试。你能提供一个简单的解决方案吗？我没能成功，谢谢你。编辑的标题是否可能与人的旧价值有关？我不想编辑此人并在标题中看到它的更改…我添加了一个额外的作用域属性editUser，该属性引用正在编辑的用户列表中的用户。我最初用另一种方式做这件事的原因是为了展示模型是如何工作的 在按下“保存”之前，已更改编辑的用户，但未更改用户集合中的用户。