javascript - 使用 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 的这些值(value)，我使用 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;
}

Controller -

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

试试这个:

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>