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>

然后，您可以使用该数组和model属性再次执行单独的ng-repeat来显示anwers。如果您使用answerCorrect种标记，则可以过滤该结果以仅显示正确答案并将answer-invalid类应用于输入。

然后，您可以通过简单地将一个新对象推送到您的阵列来扩展您的问题，而角度可以解决其余问题。

看到小提琴显示一切。

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：迭代变量的范围（或组）

方案

3 个答案: