Javascript 使用ng repeat的角度复选框值

我是新来的

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>

那么，这里 我想为chekbox显示这些值，我使用ng repeat尝试了不同的方法，但我无法做到，所以有人能帮我吗？提前谢谢

CSS是

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

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

---

我还想获取数组中的所有选中值。如何才能做到这一点？

在Angular one中，复选框与一个模型链接。但在实践中，我们通常希望一个模型存储来自多个复选框的选中值数组。在控制器中无需额外代码即可解决该任务。您应该使用标记的属性：

设置检查表模型，而不是ng模型

设置

检查表值

-应选择什么作为数组项

---

在“角度”中，一个复选框与一个模型链接。但在实践中，我们通常希望一个模型存储来自多个复选框的选中值数组。在控制器中无需额外代码即可解决该任务。您应该使用标记的属性：

设置检查表模型，而不是ng模型

设置

检查表值

-应选择什么作为数组项

可能会帮助您使用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
});

可能会帮助您使用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
});

---

如果要显示或隐藏任何内容，请使用指令ng If、ng show、hg hide。 例如： 从控制器中删除ShowCheckBox功能 和编辑您的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>

显示复选框
{{item.name}
{{tempval | json}}

如果要显示或隐藏任何内容，请使用指令ng If、ng show、hg hide。 例如： 从控制器中删除ShowCheckBox功能 和编辑您的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>

显示复选框
{{item.name}
{{tempval | json}}

试试这个：

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'MyCtrl'，函数（$scope）{
var expand=false
$scope.tempval=[{name:'ABC'}，{name:'PQR'}，{name:'XYZ'}，{name:'EFG'}]；
$scope.showcheckbox=函数（）{
var复选框=document.getElementById（“复选框”）；
如果（！展开）{
复选框.style.display=“block”；
expand=true；
}否则{
复选框.style.display=“无”；
expand=false；
}
};
});
.multiselect{
宽度：200px；
}
.选择框{
位置：相对位置；
}
.选择框选择{
宽度：100%；
字体大小：粗体；
}
.多选{
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
}
#复选框{
显示：无；
边框：1px#dadada实心；
}
#复选框标签{
显示：块；
}
#复选框标签：悬停{
背景色：#1e90ff；
}

选择一个选项
{{item.name}
试试这个：


var myApp=angular.module（'myApp'，[]）；
myApp.controller（'MyCtrl'，函数（$scope）{
var expand=false
$scope.tempval=[{name:'ABC'}，{name:'PQR'}，{name:'XYZ'}，{name:'EFG'}]；
$scope.showcheckbox=函数（）{
var复选框=document.getElementById（“复选框”）；
如果（！展开）{
复选框.style.display=“block”；
expand=true；
}否则{
复选框.style.display=“无”；
expand=false；
}
};
});
.multiselect{
宽度：200px；
}
.选择框{
位置：相对位置；
}
.选择框选择{
宽度：100%；
字体大小：粗体；
}
.多选{
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
}
#复选框{
显示：无；
边框：1px#dadada实心；
}
#复选框标签{
显示：块；
}
#复选框标签：悬停{
背景色：#1e90ff；
}

选择一个选项
{{item.name}
你能为同样的东西创建一个
plnkr吗？@Rohit我已经检查过了，但它不起作用。@ganeshk现在检查你能为同样的东西创建一个
plnkr吗？@Rohit我已经检查过了，但它不起作用。@ganeshk现在检查这一个对我不起作用，当我尝试单击“选择您的选项”时，它不会打开。@ganeshk要解决您的问题，您应该使用指令，尝试使用指令重写您的解决方案这一点对我不起作用，当我尝试单击“选择您的选项”时，它不会打开。@ganeshk要解决您的问题，您应该使用指令，尝试使用directivesHey重写您的解决方案，这里的问题是，如果您尝试选择PQR，则它选择ABC。每次它选择ABC时。@ganeshk感谢您的纠正。我更新了我的答案。现在请检查一下这个对我来说很完美。回答得很好。我只想问一件事，如果可能的话，首先当我使用这个，检查两件事，然后提交它。然后，当我第二次执行相同的操作时，它已经显示了以前选中的复选框和复选框。那么，我如何才能删除它？@ganeshk提交后，您可以再次为复选框的ng模型对象指定空白值。我尝试过，但没有成功，这就是原因