How to display selected checkbox using AngularJS with JSON format

669 views
Skip to first unread message

Judy Zhou

unread,
Oct 26, 2017, 8:51:25 PM10/26/17
to Angular and AngularJS discussion
Hi All, I am learning AngularJS and webapi. I have a search form and am trying to display data with selected checkbox. My code works with radio button but not checkbox. Can anyone help me with checkbox? Thanks. Below is my code:
 var app=angular.module('TEST',[]);
       app.controller('MYController', function ($scope, $http)
       {
     
        $http.get('http://LOCALHOST/api/schedule')
        .then(function successCallback(response){
            $scope.schedules = response.data;
           
         });      
       
        })
       .filter('CAMPUS_NAME',function(){
         return function(schedules, CAMPUS_NAME){
        if (!CAMPUS_NAME){
         return schedules;
       }
     
        var arr=[];
       angular.forEach(schedules, function(v){
       
         
        //  if (v.CAMPUS_NAME=== CAMPUS_NAME){ //works for radio
        if (v.CAMPUS_NAME.selected){   //does not work for checkbox
       
            arr.push(v);
         }
       })
       return arr;
       }
       })

index.html code:
         <!DOCTYPE html>
       <html >

          <head>
           <script data-require="angular.js@*" data-semver="1.6.1"
   
      </script>
 
        <link rel="stylesheet" href="style.css" />
      <script src="script.js"></script>
       </head>

       <body ng-app="TEST" ng-controller="MYController as MYCtrl">
      <h1>Schedule </h1>

        <div >
 
       <div>
       Campus:<br />
        <input type="radio" value="A" ng-model="searchCampus">A<br/>
        <input type="radio" value="B" ng-model="searchCampus">B<br/>
        <input type="radio" value="C" ng-model="searchCampus">C<br/>
 
        <label>A:
         <input type="checkbox" ng-model="searchCampus.selected"  
        name="searchCampus" ng-true-value="'A'" ng-false-value=""  >
       </label><br/>
         <label>B:
          <input type="checkbox" ng-model="searchCampus.selected"  value="B"
          >
         </label><br/>
         </div>

         <div ng-repeat="item in schedules|CAMPUS_NAME:searchCampus" >
 
          campus: {{item.CAMPUS_NAME}} <br />

           classno: {{item.CLASS_NBR}}             <br />

           subject: {{item.SUBJECT}}
   
         </div>
 
          </div>

           </body>

          </html>


Sander Elias

unread,
Oct 27, 2017, 2:11:15 AM10/27/17
to Angular and AngularJS discussion
Hi Judy,

Well, it depends on what you want. If you want to force the user to make a single choice, actually a radio is the correct way to handle that.
If you want to use checkboxes.the user can select multiple results. That is not a problem, but the solution you need depends on how you want to handle that in your data. 
You can mimic radio-button behavior with checkboxes also, but you really should not be that. You will become responsible for handling all the a11y that comes with that. Doing so will add a load of work that's not needed if you stick to radio-buttons.

Regards
Sander
Reply all
Reply to author
Forward
0 new messages