ng-repeat 中的动态 ng-model 并进入控制器 angular js [关闭]答案

【问题标题】：dynamic ng-model in ng-repeat and get in controller angular js [closed]ng-repeat 中的动态 ng-model 并进入控制器 angular js [关闭]
【发布时间】：2016-10-07 16:51:40
【问题描述】：

我想要 ng-repeat 中的动态 ng-model 并希望在控制器中获得这些 ng-model 的价值。我在谷歌上搜索并使用了this* 的解决方案。但在我的情况下，它给了我不确定性。我不知道为什么会这样。

我的 HTML 代码是

 <div class="item" ng-repeat="question in quiz_questions">
            <p ng-bind-html="question.question"></p>
        <div class="dh_yabox">
            <div class="placeholder">Your Answer:</div>
            <input ng-model="answers[question.question]" class="ansf" type="text" />
        </div>
</div>    



<div ng-click="nextQuestion()" class="pay_btn btn_defa"><a class="next">Next Question</a></div>

控制器代码是

$scope.nextQuestion = function(){
        console.log($scope.answers);
        angular.element('.slick-next').triggerHandler('click');
    }

在 quiz_questions 下面是数据

       [{"qid":"3","question":"<p>First Quiz Q2</p>\r\n\r\n<p><img alt=\"\" src=\"http://localhost/project/backend/uploads/qt-01.png\" style=\"width: 520px; height: 390px;\" /></p>\r\n","quiz_id":"6","answer":"test,question","time":"2016-09-22 12:43:28","quiz_name":"free quiz","id":"6"},{"qid":"1","question":"First Quiz Q1","quiz_id":"6","answer":"test,test1,test2","time":"0000-00-00 00:00:00","quiz_name":"free quiz","id":"6"}]

谁能告诉我我在这里做错了什么？

【问题讨论】：

在 plunkr 中发布一个完整的示例来重现错误。发布的代码甚至没有任何 ng-repeat，我们不知道错误是什么，以及何时发生。
函数中发生了什么，由angular.element('.slick-next').triggerHandler('click');调用？
这个声明只是为了展示新的幻灯片。就在这行代码之前，我正在安慰未定义的答案。

标签： angularjs dynamic angularjs-ng-repeat angular-ngmodel

【解决方案1】：

问题很少，

将您的ng-model 初始化为$scope.answers = {};
您从函数中触发的.slick-next 在哪里？
如果出现任何错误，请在您的 console 中检查/调试。
使用$sce.trustAsHtml();绑定HTML

查看工作示例

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', '$sce', function($scope, $sce) {
  $scope.answers = {};
  $scope.quiz_questions = [{"qid":"3","question":"<b>First Quiz Q2<b/>","quiz_id":"6","answer":"test,question","time":"2016-09-22 12:43:28","quiz_name":"free quiz","id":"6"},{"qid":"1","question":"<b>First Quiz Q1</b>","quiz_id":"6","answer":"test,test1,test2","time":"0000-00-00 00:00:00","quiz_name":"free quiz","id":"6"}];
  
  $scope.nextQuestion = function(){
        console.log($scope.answers);
        //angular.element('.slick-next').triggerHandler('click');
    }
  
  $scope.get_pre = function(x) {
    return $sce.trustAsHtml(x);
  };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div  ng-controller="GreetingController">
<div class="item" ng-repeat="question in quiz_questions">
                 <p ng-bind-html="get_pre(question.question)"></p>
        <div class="dh_yabox">
            <div class="placeholder">Your Answer:</div>
            <input ng-model="answers[question.question]" class="ansf" type="text" />
        </div>
</div>    


<div ng-click="nextQuestion()" class="pay_btn btn_defa"><a class="next">Next Question</a></div>
    </div>
</body>

【讨论】：

是的，添加 $scope.answers = {};但是你能解释一下为什么我需要初始化吗？
AngularJS 仍然是 JavaScript。所以变量需要在使用前声明。

【解决方案2】：

也许是dot 的问题。解释here

尝试在你的控制器中使用

$scope.model = {};
$scope.model.answers = {};

和

<div class="dh_yabox">
    <div class="placeholder">Your Answer:</div>
    <input ng-model="model.answers[question.id]" class="ansf" type="text" />
</div>

因为 ng-repeat 创建了自己的作用域并且它破坏了绑定

【讨论】：

不，它不适用于模型。
是的，对不起。没用的答案

【解决方案3】：

这是因为 $scope.answers 没有在您的控制器中初始化。将其初始化为空对象。

$scope.answers = {};

【讨论】：

不，虽然它在控制台中给出了空白对象，但它不起作用。