Angular动态生成的复选框。选中哪一个

时间:2016-10-13 10:34:51

标签: javascript angularjs

我已使用复选框动态生成多项选择答案。我试图用复选框选择女巫的答案是对的。我怎样才能做到这一点。

<md-list flex>
    <md-subheader class="md-no-sticky">List of Questions :</md-subheader>
    <md-list-item class="md-1-line" ng-repeat="multiQuestion in multiQuestions">
        {{$index + 1}}. {{multiQuestion}}  
            <md-checkbox ng-model="multiCheck">
                {{ $index + 1}}
            </md-checkbox>
    </md-list-item>
</md-list>

<md-subheader class="md-no-sticky">Add more Answers :</md-subheader>
    <md-input-container style="margin-right: 20px; min-width:150px">
    <label>Answer</label>
    <input name= "newMultiAnswer" ng-model="newMultiAnswer" ng-minlength="1">
    </md-input-container><md-button class="md-raised md-primary" ng-click="addMultiAnswer()">Add Answer</md-button>

function addMultiAnswers($scope) {
    $scope.multiAnswers = [];
    $scope.addMultiAnswer = function () {
        if ($scope.newMultiAnswer != undefined && $scope.newMultiAnswer != " ")
        {
            $scope.multiAnswers.push($scope.newMultiAnswer);
        }
        $scope.newMultiAnswer = ' ';
    }

1 个答案:

答案 0 :(得分:1)

您可以通过在数组中使用对象而不是纯字符串来执行此操作:

$scope.multiQuestions = [
    { question: "Does it?" },
    { question: "Do you?" }
    // ..
];

并在你的HTML中:

<md-list-item class="md-1-line" ng-repeat="multiQuestion in multiQuestions">
    {{$index + 1}}. {{multiQuestion.question}}  
        <md-checkbox ng-model="multiQuestion.checked">
            {{ $index + 1}}
        </md-checkbox>
</md-list-item>

如果你真的绑定了字符串数组,你也可以这样做:

<md-list-item class="md-1-line" ng-repeat="multiQuestion in multiQuestions">
    {{$index + 1}}. {{multiQuestion}}  
        <md-checkbox ng-model="answers[$index]">
            {{ $index + 1}}
        </md-checkbox>
</md-list-item>

然后您可以在控制器中访问它:

$scope.logAnswers = function() {
    for (var i = 0; i < $scope.multiQuestions.length; i++) {
        console.log("Question:", $scope.multiQuestions[i], "Answer:", $scope.answers[i]);
    }
}
相关问题