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中，一个复选框与一个模型链接。但在实践中，我们通常希望一个模型存储来自多个复选框的已检查值数组。 Checklist-model解决了该任务，而无需控制器中的其他代码。您应该使用标记的属性：

设置checklist-model而不是ng-model
设置checklist-value - 应该选择什么作为数组项

Answer 2

Documentation for select directive可能会帮助您使用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>

<强>纳克重复

如果我找对你试试这个：

<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>

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

试试这个：

＆＃13;

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;
    }
  };
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

使用ng-repeat的Angular复选框值

4 个答案: