Angularjs动态添加的ng-model不能通过$scope访问,显示为undefined



我正在创建表单,其中很少有字段是动态的,ng-model是动态添加的。例:

form.append("<input type='hidden' name='paymillToken' value='" + token + "' data-ng-model = 'formdata.token'/>");

当我尝试使用$scope.formdata.token

访问时,该字段显示未定义

下面是我通过ajax添加字段的另一个场景。

    angular.forEach(data.data, function(obj, key) {
        list+='<div class="items text-center"><img src="assets/uploads/discs/'+obj.image+'" class="img-circle"><br><input type="radio" id="chkDisc'+obj.id+'" name="disc_id" value="'+obj.id+'" required data-ng-model="formdata.disc_id" /></div>';
    });
    $scope.discslist = $sce.trustAsHtml(list);

好吧,我来扩展一下我的评论,以及这里其他人对你说的话,你所遇到的主要问题是你的方法固有的。你试图操纵DOM的方式非常不像angularjs。

在AngularJS中,当你想要改变显示给用户的内容(视图)时,你需要改变你的模型(控制器作用域)。这意味着,您必须设置视图以能够响应这些更改。在Angular中,我们通过指令和表达式来实现。

不管你是否意识到,你可能已经在使用指令来响应模型中的变化了。ngRepeat、ngModel、ngShow、ngIf、ngInclude,这些你可能都很熟悉,甚至表单和表单元素(比如input)在Angular中都是指令。当你使用这些时,你的模型中的一个变化(比如将数据加载到控制器作用域)会向Angular发出信号,告诉它应该检查这个变化是否影响了你视图中的任何指令,如果影响了,就通过更新视图来响应它。

为了做到这一点,Angular需要知道模型的哪些部分连接到视图的哪些部分。它在编译添加到页面中的html元素时建立这些连接。这个编译过程会在你加载Angular应用的时候自动发生。之后,就由我们来告诉Angular什么时候编译添加到页面中的html了。

通常情况下,我们甚至没有意识到这一点。例如,当你使用ngView指令时,它会为它加载的每个路由编译模板,这样你模板中的所有指令都能正确地与它们相关的模型链接起来。

我知道这是一个很长的解释,但这里有两个非常重要的点是学习AngularJS必不可少的:

  1. 要更改视图,您需要更改模型,并让页面上的指令(和表达式)响应这些更改。
  2. 当你向页面中添加html元素时,如果你想让AngularJS在你的视图中使用它们,就必须先编译它们。编译过程应该通过一个指令来完成(一个内置的或者一个自定义的)。

那么,所有这些如何适用于你的问题呢?

首先,我猜您试图通过控制器操纵DOM违反了这两条规则。即使在控制器中可能使用$compile,使用控制器更改DOM也是一种糟糕的做法,而且完全是错误的(请阅读该文档链接中的部分,其中明确指出:不要使用控制器:操纵DOM…)。当你在学习AngularJS时,要记住的一个好规则是,在Angular中使用JQuery或JQLite的时间只有在你创建自定义指令的时候。

好吧,那你怎么解决你的问题呢?使用指令。看起来你有一种情况,你试图迭代一个名为data的对象并添加一些与数据对应的输入。数据属性。这听起来像是ngRepeat的工作。

您需要做的第一件事是将数据添加到控制器中,并确保视图可以访问它。最简单的方法是在控制器中注入$scope,并将数据设置为作用域变量。最简单的形式可能是这样的:

angular.module('MyApp', [])
  .controller('MyController', ['$scope', function($scope){
    $http.get('/some/url/that/returns/the/data').
     success(function(data) {
      $scope.data = data;
    });
}]);
现在我们有了可以从视图中访问的数据,我们可以在html中使用ngRepeat指令,如下所示:
<div ng-controller="MyController">
  <div class="items text-center" ng-repeat="disc in data.data">
    <img ng-src="assets/uploads/discs/{{disc.image}}" class="img-circle"><br>
    <input type="radio" id="{{'chkDisc' + disc.id}}" name="{{disc.disc_id}}" value="{{disc.disc.id}}" required data-ng-model="formdata[disc.disc_id]" />
  </div>
</div>

这是一个常见的问题。通过更新值而不是模型,angular不知道字段中的值已经被更新了。正如第一个评论者所说,在使用ng-model时,以这种方式更新是完全没有必要的。

最新更新