从 ng-change 上的选定复选框获取 ID

Posted 2023-05-09

【中文标题】从 ng-change 上的选定复选框获取 ID

【英文标题】：Get ID From Selected Checkbox on ng-change

【发布时间】：2018-02-19 17:58:59

【问题描述】：

我试图在选中复选框时提取它的 ID，但我似乎找不到适合我正在尝试做的事情的方法。

首先我有复选框的 html / Angular。复选框由三层生成。首先是服务级别，然后是星期几，然后是服务本身（复选框是什么）。服务水平就像手风琴一样，一周中的日子被加载到选项卡中，复选框本身也照常出现。

<div class="delivery-rules">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default" ng-repeat="level in settings.serviceLevels">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#level.LevelTmsCode">level.LevelName</a>
                </h4>
            </div>
            <div id="level.LevelTmsCode" class="panel-collapse collapse in">
                <div class="panel-body">
                    <ul class="nav nav-tabs">
                        <li id="day.Day-level.LevelTmsCode-tab" ng-repeat="day in settings.serviceDays">
                            <a id="day.Day-level.LevelTmsCode" href="#tabContent-day.Day-level.LevelTmsCode" ng-click="settings.changeTab(day, level, $event)">day.Day</a>
                        </li>
                    </ul>
                    <div class="tabContent" id="tabContent-day.Day-level.LevelTmsCode" ng-repeat="day in settings.serviceDays">
                        <h4>day.Day</h4>
                        <div class="time-check" ng-repeat="service in settings.services">
                            <input type="checkbox" value="None" ng-change="settings.showChecked(settings.rules, $event)" ng-model="settings.selected[$index]" class="time-check-input" id="level.LevelTmsCode-day.Day-service.TimeValidation" name="check"/>
                            <label for="level.LevelTmsCode-day.Day-service.TimeValidation" class="time-check-input"></label> <span>service.TimeValidation</span>
                        </div>
                    </div> 
                </div>
            </div>
        </div>
    </div>
</div>

构建这些复选框、选项卡和手风琴的数组加载了来自标准 http post 请求的数据。然后，一旦完成，我将所有三个数组的所有可能组合放入一个大数组中，并将它们的选中属性设置为 false。

// Get Service Levels to Build Delivery Rules Accordion
settings.getDeliveryServices = function() 
    $http.get(resourceBase + "api/service/levels").success(function(data) 
        settings.serviceLevels = data;
        // Get Service Days
        $http.get(resourceBase + "api/service/days").success(function(days) 
            settings.serviceDays = days;
            // Build the Accordion
            setTimeout(() => settings.triggerClick(settings.serviceLevels), 500);
            $http.get(resourceBase + "api/service/services").success(function (services) 
                settings.services = services;
                // Build a collection of all possible rules
                for (var a = 0; a < settings.serviceLevels.length; a++) 

settings.rulesTmsCode.push(settings.serviceLevels[a].LevelTmsCode + "-");
                
                for (var b = 0; b < settings.serviceDays.length; b++) 
                    settings.rulesDay.push(settings.serviceDays[b].Day + "-");
                
                for (var c = 0; c < settings.services.length; c++) 

settings.rulesTime.push(settings.services[c].TimeValidation);
                
                var allArrays = [settings.rulesTmsCode, settings.rulesDay, settings.rulesTime];
                function allPossibleCases(arr) 
                    if (arr.length === 1) 
                        return arr[0];
                     else 
                        var result = [];
                        var allCasesOfRest = allPossibleCases(arr.slice(1)); 
                        for (var i = 0; i < allCasesOfRest.length; i++) 
                            for (var j = 0; j < arr[0].length; j++) 
                                result.push(arr[0][j] + allCasesOfRest[i]);
                            
                        
                        return result;
                    
                
                var uncheckedRules = allPossibleCases(allArrays);
                for (var i = 0; i < uncheckedRules.length; i++) 
                    settings.rules.push(
                        id: uncheckedRules[i],
                        checked: false
                    );
                
            );
        );
    );

当每个框被选中时，我正在尝试操作组合数组，以便将所选组合设置为 true。

// Check and Filter Rules to send
settings.showChecked = function (object, $event) 
    for (var i = 0; i < settings.rules.length; i++) 
        if (settings.rules.hasOwnProperty(i)) 
            if (typeof settings.rules[i].id == settings.selected[i]) 
                settings.showChecked(settings.rules[i], settings.selected[i]);
            
            if (settings.rules[i].id === settings.selected[i]) 
                settings.rules[i].checked = true;
            
        
    
    console.clear();
    console.log(settings.rules);

目前，没有任何设置为 true，因为我似乎无法从复选框中获取 ID 以将其与存储在组合数组的 ID 值中的字符串进行比较。所以基本上我需要选中复选框的 ID，我需要将其传递给 ng-change 事件。

【问题讨论】：

将 $event.target 对象解析到回调中。你会得到这个对象的 id。

我是否只是将 $event.target 作为参数传递给回调？

好的，所以传入它，它给了我所有复选框的数组

【参考方案1】：

试试这样的..

<input id=emp.name type=checkbox value="emp.name" ng-change="settings.showChecked(settings.rules, $event)>

 settings.showChecked=function(object,$event)
 
   var el = event.target.id
 

另一种方法是您可以像下面这样在适当的事件中传递 id 值

<select id="hairColorComponent" ng-model="hairColor"
    ng-options="option.name for option in hairColorData" 
    ng-change="updateUserData('hairColorComponent')">


$scope.updateUserData = function (id) 
var element = jQuery('#'+id);
;

【讨论】：

你不能通过 ng-change 传递事件

是的，你说得对，如果没有使用 ng-change 的特定目的，你可以使用 ng-click 代替 ng-change。