CODEWITHSUNDEEP
javascriptangularjs
Valip
Valip

Reputation: 4620

AngularJS: How to add label from checkbox to div

How can I send the text from selected checkbox to the div with selected-checkbox class?

For example, if I click on the first checkbox the div should get the text "First label".

JSFIDDLE

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<label>First label</label>
<input type="checkbox" />

<label>Second label</label>
<input type="checkbox" />

<label>Third label</label>
<input type="checkbox" />

<div class="selected-checkbox"></div>

Upvotes: 0

Views: 1886

Answers (2)

Rameshkumar Arumugam
Rameshkumar Arumugam

Reputation: 151

I updated a fiddle. Please use below link https://jsfiddle.net/itsramesh/8jauzmtm/4/

Using angular ng-true-value attribute directive for checkboxes you can set label name to div.

Upvotes: 2

Shrikant
Shrikant

Reputation: 538

enter image description here 

<script> 
angular.module('myApp',[]);
angular.module('myApp',[]).controller('MyController',function($scope){
$scope.obj={};
})
</script>

<div ng-app="myApp" ng-controller="MyController">
<label>First label</label>
<input type="checkbox" ng-model="obj.first" ng-true-value="First label" ng-false-value=""/>

<label>Second label</label>
<input type="checkbox" ng-model="obj.first" ng-true-value="Second label" ng-false-value=""/>

<label>Third label</label>
<input type="checkbox" ng-model="obj.first" ng-true-value="Third label" ng-false-value=""/>

<div class="{{obj.first}}">{{obj.first}}</div>
</div>

Upvotes: 0

Related Questions