How to check first checkbox from ng-repeat loop in angular js?

Question

Filters, I want to select first one radio button.

Restorent1 ✔ | restorent 2 | restorent3 | restorent4

<div ng-repeat="restorent_type in restaurant_types" style="margin:5px;" class="col col-offset-10">
    <label class="item item-radio radio-label {{restorent_type.RESCOD}}">
        <input type="radio" name="group" ng-model="restorent.types" value="{{restorent_type.RESCOD}}" ng-click="filters.RESCOD = restorent_type.RESCOD">
        <div class="item-content">
            {{restorent_type.RESCOD}}
        </div>
        <i class="radio-icon ion-checkmark"></i>
    </label>
</div>

and if i want to generate click event of it then it is possible? — Uttam Panara
– Uttam Panara, Commented Jun 20, 2015 at 7:19

Vineet · Accepted Answer · 2015-06-20 07:41:41Z

3

Use ng-checked

If we put an Angular interpolation expression into such an attribute then the binding information would be lost when the browser removes the attribute. The ngChecked directive solves this problem for the checked attribute. This complementary directive is not removed by the browser and so provides a permanent reliable place to store the binding information.

<input type="radio" name="group" ng-model="restorent.types" value="{{restorent_type.RESCOD}}" ng-checked="$index === 1 ? true : false" ng-click="filters.RESCOD = restorent_type.RESCOD">

Or Use

ng-checked="$first"

edited Jun 20, 2015 at 7:41

answered Jun 20, 2015 at 7:05

Vineet

4,7153 gold badges25 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shubham Nigam · Accepted Answer · 2015-06-20 07:14:08Z

2

you can use $first also

<div ng-repeat="restorent_type in restaurant_types" style="margin:5px;" class="col col-offset-10">
    <label class="item item-radio radio-label {{restorent_type.RESCOD}}">
        <input type="radio" name="group" ng-model="restorent.types" value="{{restorent_type.RESCOD}}" ng-click="filters.RESCOD = restorent_type.RESCOD" ng-checked="$first">       
        <div class="item-content">
            {{restorent_type.RESCOD}}
        </div>
        <i class="radio-icon ion-checkmark"></i>
    </label>
</div>

answered Jun 20, 2015 at 7:14

Shubham Nigam

3,97821 silver badges33 bronze badges

4 Comments

Uttam Panara Over a year ago

and if i want to generate click event of it then it is possible?

Shubham Nigam Over a year ago

yes you can ng-click for that.. and if you will give some more specific info then probably i could help

Uttam Panara Over a year ago

then how can i trigger click event of first element?

Shubham Nigam Over a year ago

ng-checked="checkFirst($first)" IN controller $scope.checkFirst=function(first){if(first == true){ //your function }}

Mohamad Shiralizadeh · Accepted Answer · 2015-06-20 07:04:14Z

1

It's easy, you can do this in your controller:

restaurant_types[0].types = true;

check first restaurant_types[0].types to true

answered Jun 20, 2015 at 7:04

Mohamad Shiralizadeh

8,8348 gold badges65 silver badges99 bronze badges

1 Comment

Uttam Panara Over a year ago

Hello, I am newer in angular js. So i try your solution to bind in my code but i can't work. I have added ng-checked="restaurant_types.types" to checkbox but it can't work!!

Ali Azam · Accepted Answer · 2017-12-19 12:12:18Z

0

Good Quation Try This Code

angular.module "myApp", []

angular.module("myApp").controller "myCtrl", ($scope) ->

  $scope.keywords = [{name: "kw1", checked: false}, {name: "kw2", checked: true}]

edited Dec 19, 2017 at 12:12

Ali Azam

2,1131 gold badge18 silver badges27 bronze badges

answered Dec 19, 2017 at 11:37

The Indian Sun

1

1 Comment

yivi Over a year ago

Welcome to Stack Overflow! While this code snippet may be the solution, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

Collectives™ on Stack Overflow

How to check first checkbox from ng-repeat loop in angular js?

4 Answers 4

Comments

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related