current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

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);
 };
share|improve this question
up vote 0 down vote accepted

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 = { };
}
share|improve this answer
up vote 1 down vote

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.

share|improve this answer
    
I am working on server data. my ng-model is data point set on server so cant make array. Is there any other option? – user3421352 Jun 2 '14 at 19:28
    
@user3421352 Well are you using a service to pull those objects into your controller? At the point that they are in your controller, why not fire them into an array and bind to that? – JMK Jun 2 '14 at 19:30
    
labels are hard coded but the ng-model with value true or false comes from the server and supposed to change on click. – user3421352 Jun 2 '14 at 19:35
    
I still don't understand why you can't take what you have and put it into an array? – JMK Jun 2 '14 at 19:41
up vote 1 down vote

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.

share|improve this answer
    
They all are nt sibling as I have some more in next rows. Will nextSibling work for that? – user3421352 Jun 2 '14 at 19:58
    
Can you lay out the exact structure? You can continue to use nextSibling to your hearts content. – Mathew Berg Jun 2 '14 at 20:02
up vote 0 down vote

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);
};
share|improve this answer
    
First, Second, ... are just placeholder for this question. I am working on server data points. – user3421352 Jun 2 '14 at 19:31

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.