2015-05-08 2 views
-2

Здесь я создал запись с помощью какой-либо переключателя. И мне нужно, когда я выбираю переключатель selectAll, выбранные записи должны появляться на той же странице.Как использовать кнопку «Выбрать все» для переключателя?

Когда я снимаю выделение любого переключателя в записи, отметка «черный» в флажке selectAll не должна появляться в флажке того же примера, который мы используем в нашем g-mail, где gmail использует этот флажок, и я пытаюсь это сделать с переключателем.

----- вот мой index.html -------

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]" 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

+0

, пожалуйста, попробуйте использовать проверку орфографии, а также ... стену кода – nsij22

+0

Установите флажок. переключатели предназначены для выбора одной опции в группе параметров – Pratik

+0

Я уже использовал это с помощью флажка, и он работал отлично, но моя задача должна быть выполнена с помощью переключателя. –

ответ

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

+0

K Могу ли я использовать переключатель привяжите таблицу документа, которая отображает меня в таблице 2, вместо использования опции select all. –

+0

Я вас не понял. Вы хотите использовать радиокнопки в таблице, где есть флажки? – Pratik

+0

Да, это был мой план, но, как вы сказали, это невозможно, поэтому я могу привязать только конкретную запись, которая будет отображаться в таблице. –

Смежные вопросы