使用ng-repeat的Angular復選框值

Question

我是angularjs 。所以，我有一些值的數組，我想在復選框中使用它。所以， HTML代碼

<div class="col-xs-12">
                    <div class="form-group">
                    <label class="col-xs-3 control-label" for="domain">Domain</label>
                        <div class="col-xs-4">
                            <div class="multiselect">
                                <div class="selectBox" ng-click="showCheckboxes()">
                                <select>
                                    <option>Select an option</option>
                                </select>
                                <div class="overSelect"></div>
                                </div>
                                <div id="checkboxes">
                                <label for="one">
                                    <input type="checkbox" id="one" />First checkbox</label>
                                <label for="two">
                                    <input type="checkbox" id="two" />Second checkbox</label>
                                <label for="three">
                                    <input type="checkbox" id="three" />Third checkbox</label>
                                </div>
                            </div>
                    </div>
                </div>
            </div>

我的陣列就像 -

$scope.tempval = [{ name: 'ABC' }, { name: 'PQR' }, { name: 'XYZ' }, { name: 'EFG' }];

所以，在這里我想展示chekbox的這些價值，我嘗試使用ng-repeat做了不同的事情，但我無法做到，所以有人能幫助我嗎？ 提前致謝。

CSS是

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

控制器 -

var.expand = false
$scope.showCheckboxes = function(){
                    var checkboxes = document.getElementById("checkboxes");
                                if (!expanded) {
                                    checkboxes.style.display = "block";
                                    expanded = true;
                                } else {
                                    checkboxes.style.display = "none";
                                    expanded = false;
                                }
                };

我還想在數組中獲取所有選中的值。我該怎么做？

Answer 1

在Angular中，一個復選框與一個模型鏈接。 但在實踐中，我們通常希望一個模型存儲來自多個復選框的已檢查值數組。 核對表模型解決了該任務，而無需控制器中的其他代碼。 你應該玩標簽的屬性：

1. 設置checklist-model而不是ng模型
2. set checklist-value - 應該選擇什么作為數組項

Answer 2

select指令的文檔可能會幫助您使用Angularjs填充下拉列表。

要從html獲取所有選中的值，請嘗試jquery -

var selected = [];    //create an array to hold checked checkboxes
$('#checkboxes input:checked').each(function() {    // get all checked checkboxes from the page
    selected.push($(this).attr('name'));    //append each to the array
});

Answer 3

如果要顯示或隱藏任何內容，請使用指令ng-if，ng-show，hg-hide。 對於您的示例：從控制器中刪除showCheckboxes函數並編輯您的HTML，如下所示

                        <div class="multiselect">
                            <div class="selectBox" ng-click="showCheckboxes = !showCheckboxes">
                            <select>
                                <option>Select an option</option>
                            </select>
                            <div class="overSelect"></div>
                            </div>
                            <div id="checkboxes" ng-if="showCheckboxes">
                            <label for="one">
                                <input type="checkbox" id="one" />First checkbox</label>
                            <label for="two">
                                <input type="checkbox" id="two" />Second checkbox</label>
                            <label for="three">
                                <input type="checkbox" id="three" />Third checkbox</label>
                            </div>
                        </div>

NG-重復

如果我找對你試試這個：

<label for="{{item.name}}" ng-repeat = "item in tempval">
  <input type="checkbox" ng-model="item.checked" id="{{item.name}}" />{{item.name}}</label>

結果

                     <div class="multiselect">
                        <div class="selectBox" ng-click="showCheckboxes = !showCheckboxes">
                        <select>
                            <option>Select an option</option>
                        </select>
                        <div class="overSelect"></div>
                        </div>
                        <div id="checkboxes" ng-if="showCheckboxes">
                        <label for="{{item.name}}" ng-repeat = "item in tempval">
  <input type="checkbox" ng-model="item.checked" id="{{item.name}}" />{{item.name}}</label>                            
                        </div>
                    </div>

 var myApp = angular.module('myApp',[]); myApp.controller('MyCtrl', function($scope) { var expand = false $scope.tempval = [{ name: 'ABC' }, { name: 'PQR' }, { name: 'XYZ' }, { name: 'EFG' }]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div class="multiselect" ng-app="myApp" ng-controller="MyCtrl"> <div class="selectBox" > <button ng-click="showCheckboxes = !showCheckboxes">show checkboxes</button> <div class="overSelect"></div> </div> <div id="checkboxes" ng-if="showCheckboxes"> <label for="{{item.name}}" ng-repeat = "item in tempval"> <input type="checkbox" ng-model="item.checked" id="{{item.name}}" />{{item.name}}</label> </div> <div>{{tempval | json}}</div> </div> 

Answer 4

嘗試這個 ：

 var myApp = angular.module('myApp',[]); myApp.controller('MyCtrl', function($scope) { var expand = false $scope.tempval = [{ name: 'ABC' }, { name: 'PQR' }, { name: 'XYZ' }, { name: 'EFG' }]; $scope.showCheckboxes = function() { var checkboxes = document.getElementById("checkboxes"); if (!expand) { checkboxes.style.display = "block"; expand = true; } else { checkboxes.style.display = "none"; expand = false; } }; }); 

 .multiselect { width: 200px; } .selectBox { position: relative; } .selectBox select { width: 100%; font-weight: bold; } .overSelect { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } #checkboxes { display: none; border: 1px #dadada solid; } #checkboxes label { display: block; } #checkboxes label:hover { background-color: #1e90ff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="MyCtrl" class="col-xs-12"> <div class="selectBox" ng-click="showCheckboxes()"> <select> <option>Select an option</option> </select> <div class="overSelect"></div> </div> <div id="checkboxes"> <label ng-repeat="item in tempval" for="{{item.name}}"> <input type="checkbox" id="{{item.name}}" />{{item.name}} </label> </div> </div>