Обновление: см. Раздел "Сценарий" ниже.
У меня есть теги <input>
как это:
<input type="text" class="form-control" placeholder="Answer 1" ng-model="mcanswer1"
ng-disabled="mca1Disabled" />
<input type="text" class="form-control" placeholder="Answer 2" ng-model="mcanswer2"
ng-disabled="mca2Disabled" />
<input type="text" class="form-control" placeholder="Answer 3" ng-model="mcanswer3"
ng-disabled="mca3Disabled" />
<input type="text" class="form-control" placeholder="Answer 4" ng-model="mcanswer4"
ng-disabled="mca4Disabled" />
а затем в контроллере:
$scope.addQuestion = function() {
// Some code
if ($scope.mcanswer1 !== "") {
list.append("<li>" + $scope.mcanswer1 + "</li>");
}
if ($scope.mcanswer2 !== "") {
list.append("<li>" + $scope.mcanswer2 + "</li>");
}
if ($scope.mcanswer3 !== "") {
list.append("<li>" + $scope.mcanswer3 + "</li>");
}
if ($scope.mcanswer4 !== "") {
list.append("<li>" + $scope.mcanswer4 + "</li>");
}
};
Я знаю, что это плохой способ итерации по этим переменным, но каков же правильный способ (например, AngularJS) сделать это?
Я должен был лучше объяснить свою настройку. Виноват.
На одной стороне моей страницы у меня есть текстовая область (для вопроса), 6 текстовых полей (для ответов с множественным выбором, только 4, показанных в примере выше) и кнопки "Добавить". Когда пользователь заполняет поля и нажимает кнопку "Добавить", на другой стороне страницы добавляется div
с вопросом в теге p
, а ответы - как неупорядоченный список ниже. Это. Поэтому функция называется addQuestion
.
Пользователь может повторять эту процедуру несколько раз, тем самым создавая набор вопросов. В этот момент это все, что мне нужно сделать. Вот почему я $scope.mcanswerN
переменные $scope.mcanswerN
--- использовать их значения, чтобы показать вопрос с другой стороны, а затем повторно использовать их для заполнения следующего вопроса.
Одна вещь, которую мы можем сделать, - объединить эти модели вместе и angular.forEach
ее с помощью angular.forEach
HTML
<input type="text" class="form-control" placeholder="Answer 1" ng-model="obj.mcanswer1"
ng-disabled="mca1Disabled" />
<input type="text" class="form-control" placeholder="Answer 2" ng-model="obj.mcanswer2"
ng-disabled="mca2Disabled" />
<input type="text" class="form-control" placeholder="Answer 3" ng-model="obj.mcanswer3"
ng-disabled="mca3Disabled" />
<input type="text" class="form-control" placeholder="Answer 4" ng-model="obj.mcanswer4"
ng-disabled="mca4Disabled" />
JS
angular.forEach($scope.obj, function(val) {
alert(val)
// conditions
if(val !== '') {
}
})
Обратите внимание, что я использовал obj.mcanswer1
в ng-модели.
forEach
дает мне переменные mcanswer1
, mcanswer2
и т. Д. В этом порядке? Иногда порядок, как кажется, меняется, особенно если одно или несколько промежуточных текстовых полей оставлены пустыми или просто пробелами.
$scope.obj
и проверьте порядок перед повторением.
Угловым способом было бы построить модель и просто привязать ваш html к этой модели.
Ваше имя метода и то, что оно кажется, похоже, конфликтуют, поэтому я предполагаю, что когда вы нажимаете кнопку, на которой хотите отображать ответы, не добавляйте вопрос.
В любом случае вы будете строить массив, который отображает ваши вопросы. что-то вроде:
$scope.questions = [{
placeHolder: 'Answer 1',
model: '',
disabled: false
},{
placeHolder: 'Answer 2',
model: '',
disabled: true
},{
placeHolder: 'Answer 3',
model: '',
disabled: false
}];
Вы распространяете это дальше с помощью переменных, чтобы сказать, что этот ответ правильный и т.д. Переменная, которая на самом деле содержит шоу с показами над входом.
затем создайте шаблон
<ul>
<li ng-repeat="q in questions">
<input type="text" class="form-control" placeholder="{{q.placeHolder}}" ng-model="q.model" ng-disabled="q.disabled" />
</li>
</ul>
Затем вы можете использовать этот массив и свойство модели, чтобы снова выполнить отдельный ng-repeat
чтобы показать только anwers. Если вы используете answerCorrect
типа answerCorrect
вы можете отфильтровать этот результат, чтобы отображать только правильные ответы и применять к вводу answer-invalid
класс.
Затем вы можете расширить свой вопрос, просто нажав новый объект на свой массив, а угловой - все остальное.
Посмотрите на скрипку, показывающую все это.
http://jsfiddle.net/bcb1tg6d/2/
Надеюсь, это поможет.
Чтобы иметь ясную итерацию, вы можете использовать lodash.
var nonEmptyKeys = _.keys(_.pick(_.pick($scope, ['mcanswer1', 'mcanswer2', 'mcanswer3', 'mcanswer4'], _.identity));
а потом
_.each(nonEmptyKeys, function(key){
list.append("<li>" + _.get($scope, key) + "</li>");
});
но эй, вы можете сделать это еще короче:
list.append( _.map(nonEmptyKeys, function(key){ return "<li>" + key + "</li>" ; }).join('') );