angularjs radio、checkbox、ng-repeat
阿新 • • 發佈:2019-01-10
radio使用ng-repeat如何預設選中:
html:
<div class="excels"> <label ng-repeat="y in mytypeData"> <input type="radio" ng-model="mytype.value" name="myname" ng-value="y.name"/><span ng-bind="y.name"></span> </label> </div>
js:
$scope.mytype = {value: 'excel'}; $scope.mytypeData= [{ "name": "excel", "checked": true }, { "name": "csv", "checked": false }, { "name": "json", "checked": false }, { "name": "txt", "checked": false } ];
chceckbox使用ng-repeat,可根據標題切換相應內容,並過濾篩選條件
<div class="dataNavUl"> <div ng-repeat="x in myExportData" ng-class="{'dataChoice':$parent.dataChoice==$index}" ng-click="$parent.dataChoice=$index"> <span ng-bind="x.name"></span> </div> </div> <div class="setting_check" ng-repeat="x in myExportData" ng-show="$parent.dataChoice==$index"> <div class="form-group"> <label class="control-label" for="checkboxes">必選:</label> <div> <button class="but1" ng-disabled="true" ng-repeat="k in x.items | filter:{'required':true}"> <span ng-bind="k.header"></span> </button> </div> </div> <div class="form-group"> <label class="control-label" for="checkboxes">可選:</label> <div> <button class="but2" ng-model="k.checked" ng-class="{'checked':k.checked}" ng-repeat="k in x.items | filter:{'required':false}" ng-click="k.checked=!k.checked;"> <span ng-bind="k.header"></span> </button> </div> </div> </div>
js1:
$scope.myExportData=data;
js2:
var uploadData = []; for (var i = 0; i < $scope.myExportData.length; i++) { for (var j = 0; j < $scope.myExportData[i].items.length; j++) {//每個items[i]是一個ss if ($scope.myExportData[i].items[j].checked) { uploadData.push($scope.myExportData[i].items[j].name); } if ($scope.myExportData[i].items[j].required) { uploadData.push($scope.myExportData[i].items[j].name); } } }