Angularjs - Simple radio button NOT able select

Question

I am trying to show a dynamic list (of file name items) using an html radio button. Please find the code below for the same:

<html>
    <head>
        <script src="angular-v1.5.5.js"></script>
    </head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <label>
          <input type="radio" ng-model="inputCreatedBy" value="byX" ng-value="true"
            ng-click="toggleSelection('byX')"> by X&nbsp;&nbsp;&nbsp;&nbsp;
          <input type="radio" ng-model="inputCreatedBy" value="byAll"  ng-value="false"
            ng-click="toggleSelection('byAll')"> by All&nbsp;&nbsp;&nbsp;&nbsp;
    </label>
    <br/><br/>
    <label ng-repeat="file in displayFiles">
            {{ file.name }}
    </label>

</div>
</body>
<script>
   var app = angular.module("myApp",[]);
   app.controller('myCtrl', function ($scope, filterFilter) {
   $scope.files = [
        { name: 'file1', createdBy: 'X' },
        { name: 'file2', createdBy: 'X' },
        { name: 'file3', createdBy: 'Y' },
        { name: 'file4', createdBy: 'Y' }
    ];
    $scope.displayFiles = [];
    $scope.toggleSelection = function(selectionType) {
        if(selectionType == 'byX') {
            for(i=0;i<$scope.files.length;i++) {
                if($scope.files[i].createdBy =='X') {
                    $scope.displayFiles.push($scope.files[i]);
                }
            }
        } else if(selectionType == 'byAll') {
            $scope.displayFiles = $scope.files;
        }
    };
   });
</script>
</html>

I am facing the below issues with this code:

(1) The Radio button option 'by X' is not selected by default, even though I marked it with ng-value 'true'.

(2) After selecting 'by All' option, I am NOT able to select 'by X' option.

Could you please help to fix these issues ?

Alex M · Accepted Answer · 2016-07-18 10:22:19Z

1

I updated your code. Please look at the jsFiddle.

There were the following problems with your code:

$scope.inputCreatedBy should've been set to byX to get it selected by default.
$scope.displayFiles should've been cleared each time toggleSelection function was used.
ngValue should be used to bind an angular expression to the value attribute of the input element. So the directive is not required in your case.

edited Jul 18, 2016 at 10:22

answered Jul 18, 2016 at 10:16

Alex M

2,8467 gold badges31 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs - Simple radio button NOT able select

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related