Angularjs - 简单的单选按钮无法选择答案

【问题标题】：Angularjs - Simple radio button NOT able selectAngularjs - 简单的单选按钮无法选择
【发布时间】：2016-07-18 09:19:21
【问题描述】：

我正在尝试使用 html 单选按钮显示（文件名项目的）动态列表。请在下面找到相同的代码：

<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>

我在使用此代码时遇到以下问题：

(1) 默认情况下不选择单选按钮选项“by X”，即使我将其标记为 ng-value 'true'。

(2) 选择“by All”选项后，我无法选择“by X”选项。

您能帮忙解决这些问题吗？

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

我更新了你的代码。请看jsFiddle。

您的代码存在以下问题：

$scope.inputCreatedBy 应该设置为 byX 以使其默认选中。
$scope.displayFiles 应该在每次使用 toggleSelection 函数时被清除。
ngValue 应该用于将角度表达式绑定到输入元素的 value 属性。因此，您的情况不需要该指令。

【讨论】：