yamuna yamuna - 1 year ago 39
AngularJS Question

Display selected checkbox value in angularjs

I have a form which have textbox,selectbox and checkbox. I want to display the values in the form in a grid table in the same page when the save button is clicked. I was able to display the textbox and selectbox value .But I dont know how to display the selected checkbox value.attached the output here
HTML code:

<div ng-controller="ProductCtrl">
<form class=rform align="center">
Product Name: <input type="text" name="name" ng-model="newProduct.name" ><br>
Product Category: <select name="catg" ng-model="newProduct.catg" ng-options="x for x in catg" ></select><br>
Tags :<input type="checkbox" name="Electronics" ng-model="newProduct.Electronics" value="Electronics" >Electronics
<input type="checkbox" name="Appliances" ng-model="newProduct.Appliances" value="Appliances">Appliances
<input type="checkbox" name="Others" ng-model="newProduct.Others" value="Books">Others

<input type="hidden" ng-model="newProduct.id" />
<div class="btn"> <button type="submit" ng-click="saveRecord()">Save</button></div>
</form>
<table border="2px" align="center" >
<tr>
<th>Product name</th>
<th>Category</th>
<th>Tag</th>
<th>id</th>
<th>Action</th>
</tr>
<tr ng-repeat="product in products">
<td>{{ product.name }}</td>
<td>{{ product.catg }}</td>
<td>{{ product.tag }}</td>
<td>{{product.id}}</td>
<td> <a href="#/form" ng-click="edit(product.id)">edit</a> |

<a href="#/form" ng-click="delete(product.id)">delete</a></td>
</tr>
</table>
</div>


controller :

app.controller('ProductCtrl',function($scope,$http){

$scope.catg = ["mobile","TV","Air Conditioner","Kitchen appliances","Footwear","SportsWear","clothes","watches"];

var empid =0;
var id = 0;
$scope.products= [

{ id:'' , 'name': '', 'catg': '', 'tag': '' }

];

$scope.saveRecord = function () {

if ($scope.newProduct.id == null) {

$scope.newProduct.id = empid++;

$scope.products.push($scope.newProduct);

} else {



for (i in $scope.products) {

if ($scope.products[i].id == $scope.newProduct.id) {

$scope.products[i] = $scope.newProduct;

}

}

}

$scope.newProduct = {};

}



$scope.delete = function (id) {



for (i in $scope.products) {

if ($scope.products[i].id == id) {

$scope.products.splice(i, 1);

$scope.newProduct = {};

}

}



}



$scope.edit = function (id) {

for (i in $scope.products) {

if ($scope.products[i].id == id) {

$scope.newProduct = angular.copy($scope.products[i]);

}

}

}
}


);

Answer Source

you can change checkbox's checked/unchecked value from true/false to custom string by ng-true-value(checked) and ng-false-value(unchecked).

and if you want the same feature for radiobutton(guessed from your comment), you can bind custom string to each radio button by ng-value.

refer the below example.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app ng-init="value='YES';value2='option1';">
  <label>
  <input type="checkbox" ng-model="value" ng-true-value="'YES'" ng-false-value="'NO'">checkbox</label><br> {{value}}
  <br>
  <label><input type="radio" name="option" ng-model="value2" ng-value="'option1'">{{option1}}</label>
  <label><input type="radio" name="option" ng-model="value2" ng-value="'option2'">{{option2}}</label>
  <label><input type="radio" name="option" ng-model="value2" ng-value="'option3'">{{option3}}</label>
  <br>
  {{value2}}
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download