Angular.js – using ng-disable

A simple Angular.js example of using ng-disable to disable radio buttons. 
<!DOCTYPE html>
<html ng-app="testApp">
<head>

<style>

  table, th , td  {
    border: 3px solid black;
    border-collapse: collapse;
    padding: 10px;
  }
  table tr:nth-child(odd)	{
    background-color: #eeeeee;
  }
  table tr:nth-child(even) {
    background-color: #ffffff;
  }

</style>

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Tizen Angular.js example"/>

    <title>Tizen Angular.js example</title>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>

    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script>

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

            app.controller('AppController', function($scope) {

                $scope.people= [{name:'Bart', surname:'Choppa', sex: 'male'},
                                {name:'Luke', surname:'Berrynski', sex: 'male'},
                                {name:'Radoslav', surname:'Manymountain', sex: 'male'},
                                {name:'Caroline', surname:'Rabbit', sex: 'female'},
                                {name:'Eve', surname:'Masuria', sex: 'female'},
                                {name:'Rafaello', surname:'Thirdone', sex: 'male'},
                                {name:'Kayetan', surname:'Wolfie', sex: 'male'},
                                {name:'Camil', surname:'Groundus', sex: 'male'}];

                $scope.sexType = "male";
                $scope.switching = false;

            });

    </script>
</head>

<body>
<div ng-controller="AppController">
  <p>Employee listing</p>
<br>
<input type="checkbox" ng-model="switching"/>Disable radio buttons
<br><br>

     <form>
       <input id="maleRadio" type="radio" name="sex" ng-model="sexType" value="male" ng-disabled="switching" checked >Male
        <br>
       <input id="femaleRadio" type="radio" name="sex" ng-model="sexType" value="female" ng-disabled="switching">Female
     </form>
     <br><br>

<table>
<tr ng-repeat="x in people | orderBy: 'surname'" ng-show="sexType == x.sex">
  <td>
   {{ $index + 1 }}
  </td>
  <td>
   {{ x.name }}
  </td>
  <td>
   {{ (x.surname | uppercase) }}
  </td>
</tr>
</table>

</div>
</body>

</html>
List

Responses

0 Replies