【问题标题】:Counting how many times a specific checked value occurs in AngularJS计算特定检查值在 AngularJS 中出现的次数
【发布时间】:2015-12-08 21:28:40
【问题描述】:

我有一些输入单选按钮可以具有以下值:“A”、“B”、“C”、“D”、“E”和“F”

我想计算每个值被检查了多少次。

我不确定如何在 AngularJS 中执行此操作,但我尝试使用像 $("#test").find("input:checked").val(); 这样的 jQuery,但我只能从第一个输入中获取值。

这是我的代码:

HTML

<div ng-controller="QuizController as quiz" class="form-group row">
    <div id="test" class="col-md-2 col-md-offset-5">
        <form ng-repeat="question in quiz.questions" role="form" class="form-orizontal" novalidate>
            <label>
                <input type="radio" value="{{question.Value1}}" name="{{question.Index}}">
                {{question.Question1}}
            </label>
            <br />
            <label>
                <input type="radio" value="{{question.Value2}}" name="{{question.Index}}">
                {{question.Question2}}
            </label>
            <hr>
        </form>
        <button class="btn btn-default" type="submit">Arată-mi profilul meu</button>
    </div>
</div>

JS

(function(){
    var app = angular.module('MotivationalApp', []);

    app.controller('QuizController', function(){
        this.questions = quiz
    });

    var quiz = [{
        Index: 1,
        Question1: "I'm a developer",
        Value1: "A",
        Question2: "I'm a tester",
        Value2: "B",
    },
    {
        Index: 2,
        Question1: "I'm happy",
        Value1: "C",
        Question2: "I'm sad",
        Value2: "D",
    }]
})();

任何人都可以提供一些帮助。非常感谢任何提示

【问题讨论】:

    标签: javascript jquery angularjs input radio-button


    【解决方案1】:

    你可以换一种方式

    <input type="radio" ng-model="checkedItems.value1" value="{{question.Value1}}" name="{{question.Index}}">
    ...
    

    ng-model="checkedItems.value1"

    在控制器中,您可以循环考虑这个对象(checkedItems)并计算检查了多少项目

    for(var key in $scope.checkedItems){
        var value = $scope.checkedItems[key];
        ...
    }
    

    【讨论】:

      猜你喜欢
      • 2022-12-22
      • 1970-01-01
      • 2019-09-29
      • 2021-09-24
      • 2019-02-09
      • 1970-01-01
      • 1970-01-01
      • 2015-03-20
      相关资源
      最近更新 更多