Question

这里我使用一些单选按钮创建了一条记录。我需要的是当我选择selectAll单选按钮时，所选记录应出现在同一页面中。

当我取消选择记录中的任何单选按钮时，selectAll复选框中的黑色标记不应出现在我们使用复选框的g-mail中使用的相同示例的复选框中，我试图做用单选按钮。

-----这是我的index.html -------

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">

   <span>Table One</span>

<div ng-controller="peopleCtrl">
    <label>
            <input type="radio" 
                   ng-model="allChecked" 
            ng-click="checkAll()" /> Select All
        </label>

      <table width="400" border="1">
      <tr> 
           <th>check</th>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Age</th>        
                    </tr>

        <tr ng-repeat="person in people">




              <td>
                    <input type="radio"  ng-model="person.check" ng-click="changeCheckAll()" /> 
              </td>      
                           <td>{{ person.id }}</td>
                           <td>{{ person.name }}</td>
                           <td>{{ person.age }}</td>

        </tr>
    </table>
    <br>
    <span>Table Two</span>
    <table width="400" border="1">
       <tr>
            <th>Id</th>
                        <th>Name</th>
                        <th>Age</th> 
            </tr>
      <tr ng-repeat="person in people | filter: {check:true}">
            <td>{{person.id}}</td>
            <td>{{person.name}}</td>
            <td>{{person.age}}</td>
      </tr>
    </table>


  </div>

  </body>

</html>

我的脚本页面

// Code goes here

var myApp = angular.module('myApp', []);

myApp.controller('peopleCtrl', function($scope) {

  $scope.people = ([{
    id: 1,
    name: "Anil",
    age: 21
  }, {
    id: 2,
    name: "Niladri",
    age: 20
  }, {
    id: 3,
    name: "Venkat",
    age: 22
  }]);




 $scope.checkAll = function() {
        for(var i=0; i < $scope.people.length; i++) {
            $scope.people[i].check = $scope.allChecked;
        }
    };


    $scope.changeCheckAll = function() {
        for(var i = 0; i < $scope.people.length; i++) {

            if (!$scope.people[i].check) {
                $scope.allChecked = false;
                return false;
            }
        }


        $scope.allChecked = true;
    };
});

我的plnkr：http://plnkr.co/edit/RKAdEZYvsJu5wbhIs41A?p=preview

Answer 1

<div ng-controller="peopleCtrl">
    <label>
            <input type="checkbox" 
                   ng-model="allChecked" 
            ng-click="checkAll()" /> Select All
        </label>

      <table width="400" border="1">
      <tr> 
           <th>check</th>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Age</th>        
                    </tr>

        <tr ng-repeat="person in people">




              <td>
                    <input type="checkbox"  ng-model="person.check" ng-click="changeCheckAll()" /> 
              </td>      
                           <td>{{ person.id }}</td>
                           <td>{{ person.name }}</td>
                           <td>{{ person.age }}</td>

        </tr>
    </table>

当您希望为用户提供在一组选项中仅选择一个选项的选项时，可以使用

单选按钮。您错误地使用了单选按钮。 Checkbox在这里工作得很好！ http://plnkr.co/edit/udgGcsMTubxf4yZapm10?p=preview

如何使用单选按钮选择全部选项？

1 个答案: