Angular: Getting changed value into array
Question
Im new to angular and Im trying to push the certain selected checkbox from table and update into new array
<tr ng-repeat="val in values ">
<td ng-bind="$index"></td>
<td ng-bind="val.rec">ED1500322</td>
<td>working</td>
<td ng-bind="val.result">I am going to School</td>
<td>
<div class="radio">
<input ng-model="val.iscorrect" value="yes" type="radio">
<label for="opt1">yes</label>
<input ng-model="val.iscorrect" value="no" type="radio">
<label for="opt10">no</label>
</div>
</td>
</tr>
As we can observe that are checkbox present, when ever the checkbox is selected, I wanted to push it into new array
I wanted new array to have only selected checkboxes
I know this can be achieved by index by not sure how to do it
Plunker: http://plnkr.co/edit/NGnUwudclnOsnO6Y9Vww?p=preview
Any help in getting only selected checkbox is appreciated
4 answers
solution1
1 ACCPTED 2016-05-19 19:56:30
You can piggyback on ng-change . It would look something like this
javascript
$scope.DoChange = function(val) { array.push(val)};
html
<input ng-model="val.iscorrect" value="yes" type="radio" ng-change="DoChange(val)">
I updated the plunkr
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="ctrl">
<table class="table table-bordered dashboard_table">
<thead>
<tr>
<th>Sl No</th>
<th>Recording ID</th>
<th>Recording
<br> Audio File</th>
<th>Speech Recognizer
<br> Output text</th>
<th>100% Correct
<br>- Y(1) / N(0)?</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="val in values ">
<td ng-bind="$index"></td>
<td ng-bind="val.rec">ED1500322</td>
<td>working</td>
<td ng-bind="val.result">I am going to School</td>
<td>
<div class="radio">
<input ng-model="val.iscorrect" value="yes" type="radio">
<label for="opt1">yes</label>
<input ng-model="val.iscorrect" value="no" type="radio" ng-change="log(val)">
<label for="opt10">no</label>
</div>
</td>
</tr>
</tbody>
</table>
<button ng-click=getResult()>getResult</button>
<script>
var ngApp = angular.module('app', []);
ngApp.controller('ctrl', function($scope) {
$scope.log = function(v){console.log(v);}
$scope.values = [{
name: "John",
rec:234,
iscorrect: ''
}, {
name: "Paul",
rec:44,
iscorrect: ''
}, {
name: "George",
rec:2664,
iscorrect: 'no'
}, {
name: "Ringo",
rec:124,
iscorrect: 'yes'
}];
$scope.result=[]
$scope.getResult=function(){
scope.result=[]
}
});
</script>
</body>
</html>
solution2
1 2016-05-19 20:00:50
If you're looking to push all the selected items into $scope.results. The modified code below taken from your plunker will work:
var ngApp = angular.module('app', []);
ngApp.controller('ctrl', function($scope) {
$scope.values = [{
name: "John",
rec: 234,
iscorrect: ''
}, {
name: "Paul",
rec: 44,
iscorrect: ''
}, {
name: "George",
rec: 2664,
iscorrect: 'no'
}, {
name: "Ringo",
rec: 124,
iscorrect: 'yes'
}];
$scope.result = []
$scope.getResult = function() {
$scope.result = $scope.values.filter(function(res) {
return res.iscorrect.length > 0;
})
}
});
solution3
1 2016-05-19 20:01:38
Here you go this should do the trick Only change this.
<tr ng-repeat="(ind,val) in values track by $index">
<td ng-bind="$index"></td>
<td ng-bind="val.rec">ED1500322</td>
<td>working</td>
<td ng-bind="val.result">I am going to School</td>
<td>
<div class="radio">
<input ng-model="values[ind].iscorrect" value="yes" type="radio">
<label for="opt1">yes</label>
<input ng-model="values[ind].iscorrect" value="no" type="radio">
<label for="opt10">no</label>
</div>
</td>
</tr>
solution4
1 2016-05-19 20:06:43
By default checkbox / radio buttons return true or false .
So this means you can just add a ng-click directive on the radio button and pass through your ng-model with $index and any other data you wish to store .
Example
<input ng-model="val.iscorrect" data-value="no" type="radio" ng-click="pushValue($index,val.iscorrect)">
FYI i would assume data-value="no" is connected to false so no need to pass this..
Hope this helps
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.