AngularJS ：迭代一个范围（或一组）变量

Question

更新：请参阅下面的场景部分。

我有 <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 个）和一个 "Add" 按钮。当用户填写字段并点击 "Add" 按钮时，一个 div 被添加到页面的另一边，问题在 p 标签中，答案是无序的列表如下。而已。这就是函数被称为 addQuestion.

的原因

用户可以多次重复这个过程，从而建立一组问题。此时此刻，这就是我需要做的。这就是为什么我要遍历 $scope.mcanswerN 变量 --- 使用它们的值来显示另一边的问题，然后重新使用它们来填写下一个问题。

Answer 1

angular 方法是构建一个模型，然后简单地将您的 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 以仅显示答案。如果您使用 answerCorrect 类型的标志，您可以过滤该结果以仅显示正确答案并将 answer-invalid 类型的 class 应用于输入。

然后您可以通过简单地将一个新对象推入您的数组来轻松扩展您的问题，angular 解决其余问题。

请参阅 fiddle 显示所有内容。

http://jsfiddle.net/bcb1tg6d/2/

希望对您有所帮助。

Answer 2

我们可以做的一件事是将这些模型组合在一起并使用 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 !== '') {
        }
    })

请注意，我在 ng-model 中使用了 obj.mcanswer1。

Answer 3

要获得清晰的迭代，您可以使用 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('') );

AngularJS ：迭代一个范围（或一组）变量

AngularJS : Iterating over a range (or group) of variables

angularjs

google-chrome-app

场景