欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

angular raido checkbox select取值

程序员文章站 2022-06-12 16:10:29
...

radio

 {{modelName}}
<div class="radio disIB">
    <label class="i-checks">
        <input type="radio" name="name" ng-model="modelName" value="1"> //因为单选 ng-model为同一个值,value是选中时候获取到的值
        <i></i>
        11
    </label>
</div>

<div class="radio disIB">
    <label class="i-checks">
        <input type="radio" name="name" ng-model="modelName" value="2">
        <i></i>
        22
    </label>
</div>

checkbox

<div class="col-md 12">
{{ckone}} ,{{cktwo}}
<div class="checkbox checkbox-primary m-t-0">
<label>
<input type="checkbox" ng-model="ckone" ng-checked="1" ng-true-value="1" ng-false-value=""> //多选时 model名不同 ng-checked:值为x的时候被选中 ng-true-value:选中的时候值 ng-false-value:取消选择的值
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
</label>
</div>//如果在js里把这个值默认选中 则 $scope.ckone = 1
<div class="checkbox checkbox-primary m-t-0">
<label>
<input type="checkbox" ng-model="cktwo" ng-true-value="3" ng-false-value="4">
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
</label>
</div>
</div>

 select

{{selectData}}
<select ng-model="selectData">
    <option ng-repeat="item in dataList" ng-click="selectData = item.value">{{item.name}}</option>
</select>

 

 

ng-repeat checkbox 取值和默认勾选

接口请求回来的json:

"certTypeRange": [
{"value": "1",
"name": "身份证"
},
{"value": "2",
"name": "护照"
},
{"value": "3",
"name": "军官证"
},
{"value": "4",
"name": "港澳通行证"
},
{"value": "5",
"name": "驾照"
},
{"value": "6",
"name": "台胞证"
},
{"value": "7",
"name": "出生证"
},
{"value": "8",
"name": "其它(个人)"
},
{"value": "30",
"name": "社会统一信用证"
},
{"value": "31",
"name": "营业执照"
},
{"value": "32",
"name": "其它(公司)"
}
],

html

<!--{{insuredCerTypeRange}}-->
<div class="checkbox checkbox-primary m-t-0 disIB mr10" ng-repeat="item in selectDataList.certTypeRange">
    <label>
        <input  type="checkbox"
                name="certTypeRange[]"
                value="{{item.value}}"
                ng-checked="insuredCerTypeRange.indexOf(item.value) > -1"
                ng-click="toggleSelection_insuredCerTypeRange(item.value)">
        <span class="cr"><i class="cr-icon fa fa-check"></i></span>
        {{item.name}}
    </label>
</div>

js

 // 被保险人证件类型
$scope.insuredCerTypeRange = ['1','2'];  //默认勾选值为1,2的checkbox
$scope.toggleSelection_insuredCerTypeRange = function funName(item) {
    var idx = $scope.insuredCerTypeRange.indexOf(item);
    if (idx > -1) {
        $scope.insuredCerTypeRange.splice(idx, 1);
    }
    else {
        $scope.insuredCerTypeRange.push(item);
    }
};

 


更多专业前端知识,请上【猿2048】www.mk2048.com