无法使用AngularJs访问HTML页面中另一个div的属性

时间:2016-05-07 13:26:02

标签: html angularjs html5

我正在尝试将值quest.quesIdquestionOption.name传递给function checkScore。但它是未定义的(questionId,optionName)。如果将同一行放在ol内,那么我就能得到quest.quesId,但这不足以达到目的。

HTML页面

<ol>
    <li ng-repeat="quest in questionJson" value={{quest.quesId}}>
        {{ quest.question }}

        <div>
            <label ng-repeat="questionOption in optionJson" ng-if="questionOption.quesId == quest.quesId">
            <input type= "radio" value = "{{ questionOption.name }}"  name="radio{{questionOption.quesId}}">
                {{ questionOption.option }}
           </label>

        </div>

        </div>
    </li>
</ol>
<button type="submit" ng-click="checkScore(quest.quesId, questionOption.name)"> Check Score </button>

JS页面

var qnaModule = angular.module("qnaModule", []);

qnaModule.controller("qaCtrl", function($scope) {

    $scope.questionJson = [{
        "question": "What's your name?",
        "quesId": 1
    }, {
        "question": "When was the universe form?",
        "quesId": 2
    }]

    $scope.optionJson = [{
        "option": "A",
        "quesId": 1
    }, {
        "option": "B",
        "quesId": 1
    }, {
        "option": "C",
        "quesId": 1
    }, {
        "option": "D",
        "quesId": 1
    }, {
        "option": "ABC",
        "quesId": 2
    }, {
        "option": "XYX",
        "quesId": 2
    }, {
        "option": "XYZ",
        "quesId": 2
    }, {
        "option": "PQRS",
        "quesId": 2
    }]

    var answerJson = $scope.answerJson = [{
        "quesId": 1,
        "answer": "A"
    }, {
        "quesId": 2,
        "answer": "XYZ"
    }]

    $scope.checkScore = function(questionId, optionName) {
        console.log(questionId);
        console.log(optionName);
    }
});

2 个答案:

答案 0 :(得分:0)

quest.quesIdquestionOption.name仅适用于li标记。尝试在输入类型复选框字段中给出单击功能,并捕获questId和选项值,然后传递给按钮功能。

此外,您的输入值有误,应该是 questionOption.option 而不是 questionOption.name 。请在按钮点击功能中更正。

答案 1 :(得分:0)

让我知道此代码是否有帮助,

$result = array_map(
    // Runs for each element of $customers
    function ($customersGroup) {
        // create your sum object
        $sum = ...

        // Insert the `sum` into $customersGroup
        $customersGroup['sum'] = $sum;

        // Return the modified $customersGroup
        return $customersGroup;
    },
    $customers
);

和HTML如下,

    var qnaModule = angular.module("qnaModule", []);

qnaModule.controller("qaCtrl", ['$scope',function($scope) {

    $scope.questionJson = [{
        "question": "What's your name?",
        "quesId": 1
    }, {
        "question": "When was the universe form?",
        "quesId": 2
    }];

    $scope.optionJson = [{
        "option": "A",
        "quesId": 1
    }, {
        "option": "B",
        "quesId": 1
    }, {
        "option": "C",
        "quesId": 1
    }, {
        "option": "D",
        "quesId": 1
    }, {
        "option": "ABC",
        "quesId": 2
    }, {
        "option": "XYX",
        "quesId": 2
    }, {
        "option": "XYZ",
        "quesId": 2
    }, {
        "option": "PQRS",
        "quesId": 2
    }];

    $scope.answerJson = [];

    $scope.checkScore = function(answerObject) {
        for(var i = 0; i < $scope.questionJson.length; i++) {

            console.log(answerObject[$scope.questionJson[i].quesId].answer);
        }

    };}]);