AngularJS If Checkbox is check display

Question

Can someone show me the correct syntax for creating a If/Else statement for the ng-repeat? In short, If box is checked display max number range. If unchecked display min. I have searched and searched, but I can't find the syntax for doing it on the page and not inside the controller.

**json**
{
    "min": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
    "max": ["91", "92", "93", "94", "95", "96", "97", "98", "99", "100"]
}

**Inside my controller declaring scope**
$scope.min = response.data.min;
$scope.max = response.data.max;

**display.html**
<input type="checkbox" name="min-max" id="min-max" class="css-min-max"     checked="checked"/>

<div ng-repeat="info in min"> <--- this is my problem. 
      <p>{{info}}<p>
</div>

Tom22 · Accepted Answer · 2016-08-26 00:03:06Z

Perhaps you're looking for something more than the use-case you described(there are fine solutions in other answers)

Here is a long way:

<body ng-app="listByCheckbox" >
  <div ng-controller="listDisplayCtrl">
     <input type="checkbox" ng-model="checkedList"   ng-init="checkedList=true"/> 
       Check the box for low numbers, un-check box for high numbers
       <div ng-value= "selectedList = checkedList ? listOptions.min : listOptions.max"  >
          <p ng-repeat="info in selectedList">{{info}} is a fine number.<p>     
       </div>
   </div>
</body>

with a controller with no logic in it as you requested like this:

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

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

    $scope.listOptions = {
      "min": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
      "max": ["91", "92", "93", "94", "95", "96", "97", "98", "99", "100"]
    }

  })

fiddle

razorRun · Accepted Answer · 2016-08-24 20:55:02Z

0

you can use ng-show (ng-mode for the check box) and have two html nodes or have a filter.

<label class="item item-text-wrap" ng-show="checked"></label>
<label class="item item-text-wrap" ng-show="notchecked"></label>

answered Aug 24, 2016 at 20:55

razorRun

1108 bronze badges

2 Comments

Sam Bush Over a year ago

so like this? <label class="item item-text-wrap" ng-show="checked"> <div ng-repeat="info in min"> <p>{{info}}<p> </div> </label> <label class="item item-text-wrap" ng-show="notchecked"> <div ng-repeat="info in max"> <p>{{info}}<p> </div> </label>

razorRun Over a year ago

<input ng-mode ="checked"></input> --for ChBOX<label class="item item-text-wrap" ng-show="checked"> <div ng-repeat="info in min"> <p>{{info}}<p> </div> </label> <label class="item item-text-wrap" ng-show="!checked"> <div ng-repeat="info in max"> <p>{{info}}<p> </div> </label dont forget to mark as right if works out. cherrs

just.ru · Accepted Answer · 2016-08-24 21:05:55Z

0

You can choose collection dynamically with controller's method invocation.

Controller:

$scope.selected = false;
$scope.choose = function() {
    return $scope.selected ? $scope.max : $scope.min;
}

HTML:

<input ... ng-model="selected">
<div ng-repeat="info in choose()">

answered Aug 24, 2016 at 21:05

just.ru

6485 silver badges12 bronze badges

Comments

Aravind · Accepted Answer · 2016-08-24 21:22:13Z

0

Modify your HTML as

<input id="some_id" type="checkbox" ng-checked="minmax">

<div ng-repeat="info in repeatData">
<p>{{info}}</p>
</div>

add the following to your controller

if(minmax){
$scope.repeatData=response.data.max;
}
else
{
$scope.repeatData=response.data.min;
}

answered Aug 24, 2016 at 21:22

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

Collectives™ on Stack Overflow

AngularJS If Checkbox is check display

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related