如何在angularjs中单击按钮时获得选中的复选框

Question

I want to do something like this

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

On button click I want to display selected checkbox labelname.

 $scope.chkSelect = function (value) {
     console.log(value);
 };

Answer 1

Because the checkboxes are mapped, you can reference $scope.first, $scope.second, etc in your chkSelect() function. It's also possible to have a set of checkboxes mapped as a single array of data instead of having to give each checkbox a name. This is handy if you are generating the checkboxes, perhaps from a set of data.

Answer 2

I agree with Bublebee Mans solution. You've left out a lot of detail on why you're trying to get the label. In any case if you REALLY want to get it you can do this:

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

You can mess around with it to see if it's indeed selected.

fiddle: http://jsfiddle.net/pzz6s/

Side note, for anybody who knows angular please forgive me.

Answer 3

You want to have something like the following in your controller (untested, working from memory):

$scope.checkBoxModels = [ { name: 'first', checked: false }, { name: 'second', checked: false }, { name: 'third', checked: false }, { name: 'fourth', checked: false } ];

Then in your view:

<input ng-repeat"checkboxModel in CheckBoxModels" ng-model="checkBoxModel.checked" ng-click="chkSelect(checkBoxModel)" /><label>{{checkBoxModel.name}}</label>

Then update your function:

$scope.chkSelect = function (checkBoxModel) {
    console.log(checkBoxModel.name);
};

Answer 4

If you are dealing with server data, you might need isolated html block and deal with data in controller only.

You can do it by creating array in controller, maybe your data from response, and use ngRepeat directive to deal independently in html code.

Here is what I am telling you:

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>

Javascript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
$scope.names = ['pizza', 'unicorns', 'robots'];
$scope.my = { };
}