javascript - 我如何默认检查单选按钮？

Question

在页面加载时，我想在默认选择的单选按钮下方显示我使用了 html 属性，但它不起作用。所以在页面加载时我想显示默认选中的所有进程单选按钮。有没有其他方法可以完成这个任务？

radio .html

<div class="panel panel-default">
    <div class="panel-heading">View/Search Inventory</div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-2">
                <select kendo-drop-down-list k-data-text-field="'name'"
                    k-data-value-field="'value'" k-data-source="filterOptions"
                    k-ng-model="kfilter" ng-model="filter" ng-change="onChange()"></select>
            </div>
            <div ng-show="filter=='PROCESS'" ng-init="search.showCriteria='allProcess';onChange()">
                <div class="col-md-7">
                    <label class="radio-inline" for="allProcess"> <input
                        type="radio" name="optionsRadios1" ng-value="'allProcess'"
                        id="allProcess" ng-model="search.showCriteria"
                        ng-change="selectSearchType()"> Show All Processes
                    </label> <label class="radio-inline" for="ratedProcess"> <input
                        type="radio" name="optionsRadios1" ng-value="'ratedProcess'"
                        id="ratedProcess" ng-model="search.showCriteria"
                        ng-change="selectSearchType()"> Show Rated Processes
                    </label> <label class="radio-inline" for="unratedProcess"> <input
                        type="radio" name="optionsRadios1" ng-value="'unratedProcess'"
                        id="unratedProcess" ng-model="search.showCriteria"
                        ng-change="selectSearchType()"> Show Unrated Processes
                    </label>
                </div>
            </div>
            <div ng-show="filter=='RISK'">
                <div class="col-md-7">
                    <label class="radio-inline" for="allRisk"> <input
                        type="radio" name="optionsRadios1" ng-value="'allRisk'"
                        id="allRisk" ng-model="search.showCriteria" ng-checked="true"
                        ng-change="selectSearchType()"> Show All Risks
                    </label> <label class="radio-inline"> <input type="radio"
                        name="optionsRadios1" ng-value="'unalignedRisk'"
                        ng-model="search.showCriteria" ng-change="selectSearchType()">
                        Show Unaligned Risks
                    </label>
                </div>
            </div>
            <div ng-show="filter=='CONTROL'">
                <div class="col-md-7">
                    <label class="radio-inline" for="allControl"> <input
                        type="radio" name="optionsRadios1" ng-value="'allControl'"
                        id="allControl" ng-model="search.showCriteria" ng-checked="true"
                        ng-change="selectSearchType()"> Show All Controls
                    </label> <label class="radio-inline" for="unalignedControl"> <input
                        type="radio" name="optionsRadios1" ng-value="'unalignedControl'"
                        id="unalignedControl" ng-model="search.showCriteria"
                        ng-change="selectSearchType()"> Show Unaligned Controls
                    </label>
                </div>
            </div>
            <div class="col-md-2">
                <button class="btn btn-default" type="button" ng-click="search(0)">
                    <span class="glyphicon glyphicon-search"></span> Search
                </button>
            </div>
        </div>
        <div class="row">
            <!--<label for="filterBy" class="col-md-1">Filter by: </label>
             <div class="col-md-3">
                    <select kendo-drop-down-list k-data-text-field="'name'" k-option-label="'Select'"
                        k-data-value-field="'value'" k-data-source="filterByOptions"
                        k-ng-model="kfilterBy" ng-model="filterBy" style="width: 100%"></select>
            </div>
            <div class="col-md-3">
                    <select kendo-drop-down-list k-data-text-field="'name'"
                        k-data-value-field="'value'" k-data-source="filterByValues" k-option-label="'Select'"
                        k-ng-model="kfilterByValue" ng-model="filterByValue" style="width: 100%"></select>
            </div> -->
            <div class="col-md-3">
                <a href="" ng-show="!showAdvance" ng-click="advanceFilter()">Advanced
                    Search</a> <a href="" ng-show="showAdvance" ng-click="advanceFilter()">Basic
                    Search</a>&nbsp;&nbsp;&nbsp;
                <!-- <button ng-show="!showAdvance" class="btn btn-default" type="button" ng-click="search()">Go</button> -->
            </div>

        </div>
        <form role="form" name="formTimeLine" kendo-validator="validator"
            k-options="myValidatorOptions">
            <div ng-show="showAdvance">
                <div class="clone" ng-repeat="input in inputs">
                    <br />
                    <div class="row">
                        <div class="col-md-1">
                            <a ng-if="inputs.length < searchOptions.length"
                                class="add col-md-1" name="addnumadd" ng-click="add($index)">&nbsp;</a>
                            <a ng-if="inputs.length >1" class="delete col-md-1"
                                name="deletenumadd" ng-click="remove($index)">&nbsp;</a>
                        </div>
                        <div class="col-md-3">
                            <select kendo-drop-down-list k-data-text-field="'name'"
                                k-option-label="'Select'" k-data-value-field="'value'"
                                k-data-source="searchOptions" name="searchBy-{{$index}}"
                                ng-model="input.searchBy"
                                data-required-msg="Please select the value"
                                ng-change="clearPreviousValue({{$index}})" data-duplicate=""
                                style="width: 100%" required></select>
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control"
                                ng-model="input.searchValue" placeholder="Enter search item"
                                ng-maxlength="256" name={{$index}}>
                        </div>
                        <div class="col-md-4">
                            <input type="radio" name={{$index}} value="exactMatch"
                                ng-model="input.exactMatch" data-requiredCheckbox="">&nbsp;&nbsp;Exact
                            Match <input type="radio" name={{$index}} value="contains"
                                ng-model="input.exactMatch" data-requiredCheckbox="">&nbsp;&nbsp;Contains
                            <span class="k-invalid-msg" data-for={{$index}}></span>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div id="outergrid" class="row">
        <ng-include src="gridInclude"></ng-include>
    </div>
</div>

radio .js

    $scope.processSearchOptions = processSearchOptions;


    $scope.riskSearchOptions = riskSearchOptions;


    $scope.controlSearchOptions = controlSearchOptions;


    $scope.filterByOptions = filterByOptions;


    $scope.filterByValues = filterByValues;

    $scope.searchOptions = processSearchOptions;

    $scope.onChange = function () {
        var value = $scope.filter;
        $scope.postArgs.page = 1;
        if (value === 'PROCESS') {
            $scope.search.showCriteria = 'allProcess';
            $scope.searchOptions = processSearchOptions;
            $scope.gridInclude = 'views/viewAll/processGrid.html';
        }
        if (value === 'RISK') {
            $scope.search.showCriteria = 'allRisk';
            $scope.searchOptions = riskSearchOptions;
            $scope.gridInclude = 'views/viewAll/riskGrid.html';
        }
        if (value === 'CONTROL') {
            $scope.search.showCriteria = 'allControl';
            $scope.searchOptions = controlSearchOptions;
            $scope.gridInclude = 'views/viewAll/controlGrid.html';
        }
        $scope.showAdvance = false;
        $scope.clearAdvFilter();
        $scope.postArgs = {
            page: 1
        };
    };
    //initialize process grid
    initializeGrid('process');
    $scope.processGridOptions = getProcessGridOptions($scope.postArgs, gridColumns.processGridColumns);
    $scope.processInnerGridOptions = viewSearchInvService.getInnerProcessGrid;

    //initialize risk grid
    initializeGrid('risk');
    $scope.riskGridOptions = getProcessGridOptions($scope.postArgs, gridColumns.riskGridColumns);

    $scope.riskInnerGridOptions = viewSearchInvService.getInnerRiskGrid;

    //initialize control grid
    initializeGrid('control');
    $scope.controlGridOptions = getProcessGridOptions($scope.postArgs, gridColumns.controlGridColumns);

    $scope.controlInnerGridOptions = viewSearchInvService.getInnerControlGrid;


    $scope.ProcessEditHandler = function (id) {
        ViewEditPrcsService.saveProcessId(id);
    };
    $scope.RiskEditHandler = function (id) {
        ViewEditRiskService.saveRiskId(id);
    };
    $scope.advanceFilter = function () {
        if ($scope.showAdvance) {
            $scope.clearAdvFilter();
            $scope.showAdvance = false;
        } else {
            $scope.showAdvance = true;
        }
    };
    $scope.clearAdvFilter = function () {
        $scope.inputs = [];
        $scope.inputs.push(getNewObject());
    };
    $scope.search = function () {
        if ($scope.validator.validate() || !$scope.showAdvance) {
            searchCriteria(1);
            searchFlag = true;
            if ($scope.filter === 'PROCESS') {
                $scope.search.process.dataSource.read();
            }
            if ($scope.filter === 'RISK') {
                $scope.search.risk.dataSource.read();
            }
            if ($scope.filter === 'CONTROL') {
                $scope.search.control.dataSource.read();
            }
        }
    };

    $scope.selectSearchType = function () {
        $scope.clearAdvFilter();
        $scope.showAdvance = false;
        $scope.search();
    };

    $scope.add = function () {
        $scope.inputs.push(getNewObject());
    };
    $scope.remove = function (index) {
        $scope.inputs.splice(index, 1);
    };

    $scope.myValidatorOptions = {
        rules: {
            duplicate: function (input) {
                return checkDuplicates(input.val(), input[0].name);
            },
            requiredCheckbox: function (input) {
                return !(input[0].type === 'radio' && !$scope.inputs[input[0].name].exactMatch && !$scope.inputs[input[0].name].contains);
            }
        },
        messages: {
            duplicate: 'Option already selected. please select another option',
            requiredCheckbox: 'Operator is required'
        }
    };

    $scope.clearPreviousValue = function (index) {
        $scope.inputs[index].searchValue = '';
    };
});

Answer 1

在不知道更多关于何时检查的细节的情况下，使用 ngChecked 应用以下内容.在这种情况下，检查是否 true , 但这可以是任何表达式

ng-checked="true"

JSFiddle Link

为了响应您更新的代码，您可以利用 ngInit在你的 parent 身上<div>用于默认一组中的一个单选按钮。 注意 用于隔离直接问题我已经精简了大部分标记

<div ng-init="search.showCriteria='allProcess'">

Updated JSFiddle Link