AngularJS: перебор диапазона (или группы) переменных

0

Обновление: см. Раздел "Сценарий" ниже.

У меня есть теги <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 --- использовать их значения, чтобы показать вопрос с другой стороны, а затем повторно использовать их для заполнения следующего вопроса.

  • 0
    переместить поведение в HTML, используя ng-if / ng-show
Теги:
google-chrome-app

3 ответа

1
Лучший ответ

Одна вещь, которую мы можем сделать, - объединить эти модели вместе и 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-модели.

  • 0
    Почему это forEach дает мне переменные mcanswer1 , mcanswer2 и т. Д. В этом порядке? Иногда порядок, как кажется, меняется, особенно если одно или несколько промежуточных текстовых полей оставлены пустыми или просто пробелами.
  • 0
    @markvgti просто войдите в $scope.obj и проверьте порядок перед повторением.
Показать ещё 1 комментарий
2

Угловым способом было бы построить модель и просто привязать ваш 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/

Надеюсь, это поможет.

  • 0
    Я на самом деле добавляю вопрос с несколькими вариантами ответов, просто я показал только часть о чтении значений текстового поля и добавлении их в область отображения. Пожалуйста, смотрите мое объяснение Сценария, добавленное к вопросу.
  • 0
    @markvgti Я обновил скрипку. jsfiddle.net/bcb1tg6d/4 Если я правильно понимаю, вы просто соответственно расширяете свою модель и шаблон. Таким образом, ваш вопрос имеет множество возможных ответов. Затем вы привязываете к свойству выбранный ответ для выполнения проверки. Вы можете легко изменить возможные ответы. Логика проверки требует небольших изменений. Также легко добавлять новые вопросы или удалять их на лету. Вам не нужно использовать выбор для отображения ответов либо. Это было просто для удобства использования в демонстрационных целях.
0

Чтобы иметь ясную итерацию, вы можете использовать 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('') );

Ещё вопросы

Сообщество Overcoder
Наверх
Меню