Question

我正在尝试使用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）选择“全部”选项后，我无法选择“按X”选项。

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

Answer 1

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

您的代码存在以下问题：

$scope.inputCreatedBy应设置为byX以默认选中它。

$scope.displayFiles

toggleSelection都应该被清除。
ngValue应该用于将角度表达式绑定到input元素的value属性。因此，在您的情况下不需要该指令。

Angularjs - 简单单选按钮无法选择

1 个答案: