checked="checked" does not work on ng-repeat

Asked

Viewed 196 times

1

I’m working on a resume feature where basically the user will click on a respective radio button in which he has experience. The problem is that for a list it will come from back-end, that now she’s static, the checked is not working, although in the element html is marked as checked="checked". I’ll release the code here so you can 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>
    <script src="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>

javascript angularjs html5 radiobutton

  • If I didn’t get it wrong, when running your code at least 1 option should come checked on each item, this is it?

  • yes, in this case only this one because in $Scope.curriculum = { frame: [{ val: 2, text: 'Node' }] }; only has one item

  • solved the question I had to use the angular.element to be able to function and assign an id to each radiobutton

  • Boo! Boo Boo!!!

1 answer

1

var app = angular.module("tst",[]);

app.controller("ctrl", function($scope){

$scope.frameDefault = [
    "AngularJS",
    "Node",
    "Bootstrap",
    "SpringBoot"
];

$scope.curriculum = {
    frame: [{
        val: 2,
        text: 'Node'
    },{
       val: 4,
       text: "SpringBoot"
    }]
};

$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) {
        var isExist = element.text === tag.text && element.val === tag.val;
        if(isExist){
            angular.element("#" + element.text + "-" + element.val).prop("checked",true);
        }
        return isExist;
    }).length === 1;
};
});
  <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Radio Button</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script
        src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="app.js"></script>
</head>
<body ng-app="tst">
<div ng-controller="ctrl">
<form class="form-horizontal">
    <fieldset>
        <!-- Form Name -->
        <legend>Curriculum</legend>
        <!-- Multiple Radios (inline) -->
        <div class="form-group" ng-repeat="frame in frameDefault">
            <label class="col-md-4 control-label">{{frame}}</label>
            <div class="col-md-4">
                <label class="radio-inline" ng-repeat="val in [1, 2, 3, 4, 5] track by $index">
                    <input type="radio"
                           ng-model="tag"
                           name="{{frame}}"
                           id="{{frame}}-{{$index}}"
                           ng-value="{val: {{$index}}, text:'{{frame}}'}"
                           ng-checked="isExists({val: {{$index}}, text:'{{frame}}'})"
                           ng-click="pushTag(tag)"/>
                    {{$index}}
                </label>
            </div>
        </div>

    </fieldset>
</form>
</div>
</body>
</html>

Browser other questions tagged javascript angularjs html5 radiobutton

You are not signed in. Login or sign up in order to post.