Javascript 如何在angularjs中单击按钮时获取选中的复选框
我想做这样的事情Javascript 如何在angularjs中单击按钮时获取选中的复选框,javascript,angularjs,checkbox,Javascript,Angularjs,Checkbox,我想做这样的事情 <input type="checkbox" ng-model="first" ng-click="chkSelect()"/><label>First</label> <input type="checkbox" ng-model="second" ng-click="chkSelect()"/><label>Second</label> <input type="checkbox" ng-m
<input type="checkbox" ng-model="first" ng-click="chkSelect()"/><label>First</label>
<input type="checkbox" ng-model="second" ng-click="chkSelect()"/><label>Second</label>
<input type="checkbox" ng-model="third" ng-click="chkSelect()"/><label>Third</label>
<input type="checkbox" ng-model="forth" ng-click="chkSelect()"/><label>Forth</label>
<button>Selected</button>
由于复选框已映射,因此可以在chkSelect()函数中引用$scope.first、$scope.second等。还可以将一组复选框映射为单个数据数组,而不必为每个复选框指定名称。如果您正在生成复选框(可能是从一组数据生成的),这将非常方便。您希望在控制器中包含以下内容(未测试,从内存工作): 那么在你看来,
<input ng-repeat"checkboxModel in CheckBoxModels" ng-model="checkBoxModel.checked" ng-click="chkSelect(checkBoxModel)" /><label>{{checkBoxModel.name}}</label>
我同意BublebeeMans的解决方案。你漏掉了很多关于你为什么要得到这个标签的细节。在任何情况下,如果你真的想得到它,你可以这样做:
$scope.chkSelect = function (value) {
for(var key in $scope){
var inputs = document.querySelectorAll("input[ng-model='" + key + "']");
if(inputs.length){
var selectedInput = inputs[0];
var label = selectedInput.nextSibling;
console.log(label.innerHTML);
}
};
};
你可以把它弄得乱七八糟,看看它是否真的被选中了
小提琴:
旁注,对于任何了解angular的人,请原谅。如果您正在处理服务器数据,您可能需要单独的html块,并且只在控制器中处理数据 您可以通过在控制器中创建数组(可能是来自响应的数据)并使用ngRepeat指令在html代码中独立处理来实现这一点 以下是我要告诉你的: HTML:
<form ng-controller="MyCtrl">
<label ng-repeat="name in names" for="{{name}}">
{{name}}
<input type="checkbox"
ng-model="my[name]"
id="{{name}}"
name="favorite" />
</label>
<div>You chose <label ng-repeat="(key, value) in my">
<span ng-show="value == true">{{key}}<span>
</label>
</div>
</form>
我正在处理服务器数据。我的ng模型是服务器上设置的数据点,因此无法生成阵列。还有其他选择吗?@user3421352那么,您是否使用服务将这些对象拉入控制器?既然它们在你的控制器中,为什么不将它们激发到一个数组中并绑定到该数组中呢?标签是硬编码的,但值为true或false的ng模型来自服务器,应该在单击时更改。我仍然不明白为什么你不能将你拥有的东西放入数组中?首先,其次。。。你只是这个问题的占位符。我正在处理服务器数据点。它们都是nt同级,因为我在下一行还有一些。下一步可以吗?你能安排好确切的结构吗?您可以继续使用nextSibling以满足您的需求。
$scope.chkSelect = function (checkBoxModel) {
console.log(checkBoxModel.name);
};
$scope.chkSelect = function (value) {
for(var key in $scope){
var inputs = document.querySelectorAll("input[ng-model='" + key + "']");
if(inputs.length){
var selectedInput = inputs[0];
var label = selectedInput.nextSibling;
console.log(label.innerHTML);
}
};
};
<form ng-controller="MyCtrl">
<label ng-repeat="name in names" for="{{name}}">
{{name}}
<input type="checkbox"
ng-model="my[name]"
id="{{name}}"
name="favorite" />
</label>
<div>You chose <label ng-repeat="(key, value) in my">
<span ng-show="value == true">{{key}}<span>
</label>
</div>
</form>
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.names = ['pizza', 'unicorns', 'robots'];
$scope.my = { };
}