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 个）和一个“添加”按钮。当用户填写字段并点击“添加”按钮时，div 将添加到页面的另一侧，其中的问题在 p 标记中，答案在下面作为无序列表。而已。这就是为什么该函数被称为addQuestion。

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

Answer 1

有角度的方法是构建一个模型，然后简单地将您的 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 类型的类应用于输入。

然后，您可以通过简单地将新对象推送到您的数组来轻松扩展您的问题，然后用 Angular 解决剩下的问题。

看小提琴展示了这一切。

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('') );