I'm working on a resume feature where basically the user will click on their radio button
in which he has experience. The problem is that for a list that will come from the backend , which is now static, checked
is not working, even though element html
is marked as checked="checked"
. I'll make the code available here for you to see.
var app = angular.module("tst",[]);
app.controller("ctrl", function($scope){
$scope.frameDefault = [
"AngularJS",
"Node",
"Bootstrap",
"SpringBoot"
];
$scope.curriculum = {
frame: [{
val: 2,
text: 'Node'
}]
};
$scope.pushTag = function(tag){
if($scope.curriculum.frame.length === 0){
$scope.curriculum.frame.push(tag);
} else {
$scope.curriculum.frame.forEach(function (element, index) {
if(element.text === tag.text){
$scope.curriculum.frame[index] = tag;
} else if (element.text !== tag.text){
$scope.curriculum.frame.push(tag);
}
});
$scope.curriculum.frame = $scope.curriculum.frame.filter(function(element, index) {
return $scope.curriculum.frame.indexOf(element) === index;
});
}
console.log($scope.curriculum.frame);
};
$scope.isExists = function (tag) {
return $scope.curriculum.frame.filter(function (element) {
return element.text === tag.text && element.val === tag.val;
}).length === 1;
};
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Radio Button</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script><scriptsrc="app.js"></script>
</head>
<body ng-app="tst">
<div ng-controller="ctrl">
<label ng-repeat="frame in frameDefault">
{{frame}}
<input type="radio"
ng-model="tag"
name="{{frame}}"
ng-value="{val: {{$index + 1}}, text:'{{frame}}'}"
ng-checked="isExists({val: {{$index + 1}}, text:'{{frame}}'})"
ng-click="pushTag(tag)"
ng-repeat="val in [1, 2, 3, 4, 5] track by $index"/>
<br>
</label>
{{curriculum.frame}}
</div>
</body>
</html>