Question

49

Can I set a variable inside ng-repeat?

rated 0 times [ 51] [ 2] / answers: 1 / hits: 20190 / 9 Years ago, sat, may 9, 2015, 12:00:00

I have an application that has two forms that are lists of buttons and a form with a list of labels. I choose a person, choose a phone, and on the third form I show a list of phones and their associated people (location). Is it possible to set a variable with ng-click inside an ng-repeat block? I tried settings a variable _person to be equal to the the button text, which would be {{person}}, but _person doesn't seem to be set to anything when I print it on the next form. I'm also not sure if I used ng-init correctly in the first <div>, and should I be using ng-model at all?

<div ng-init=showSelectUser=true; _person=''>

<div class=selectUser ng-show=showSelectUser>

    <h2>Who are you?</h1>

    <ul ng-click=showSelectUser=false; showDeviceForm=true;>

      <li ng-repeat=person in people>

        <a href=# role=button ng-click=_person={{person}}>{{person}}</a>

      </li>

    </ul>

  </div>



  <div class=selectDevice ng-show=showDeviceForm ng-click=showDeviceForm=false; showDeviceList=true>

    <p>person: {{_person}}</p>

    <h2>Which phone?</h2>

    <ul>

      <li ng-repeat=device in devices>

        <a class=btn btn-default href=# role=button ng-click=device.location=_person>{{device.name}}</a>

      </li>

    </ul>

  </div>



  <div class=devicesView ng-show=showDeviceList>

    <ul>

      <li ng-repeat=device in devices>

        <h3>{{device.name}}</h3>

        <h4 class=deviceLocation>{{device.location}}</h4>

      </li>

    </ul>

  </div>

</div>







angular.module('devicesApp')

  .controller('MainCtrl', function ($scope) {

    $scope.devices = [

        {name: 'iPhone 4', location: 'Desk'},

        {name: 'iPhone 5', location: 'Desk'},

        {name: 'iPhone 6', location: 'Desk'},

    ];



    $scope.people = [

        'John',

        'Scott',

        'Adam'

    ];

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

malkajillc

Add To Favorites

Follow

Total Points: 652

Total Questions: 107

Total Answers: 98

Location: Finland

Member since Sat, Nov 6, 2021

3 Years ago

malkajillc questions

1 Vitest mock modules function in only one test and use the actual function in others

Wed, Nov 2, 22, 00:00, 2 Years ago

1 How to change PrismaClient database connection at runtime?

Tue, Jun 29, 21, 00:00, 3 Years ago

1 How do I add the axios package to my chrome extension I'm working on?

Tue, Dec 15, 20, 00:00, 4 Years ago

1 How to make a bot ping a user using discord.js

Fri, Aug 21, 20, 00:00, 4 Years ago

1 TypeError: Cannot read property 'v4' of undefined

Tue, Aug 11, 20, 00:00, 4 Years ago

View All

answered 9 Years ago terrencegreysons · Accepted Answer

The ngRepeat directive creates a new scope, so if you have ng-click="device.location=_person" the device model will be created in that scope if it not exists. So make sure that device already exists in a parent scope, for example by setting $scope.device = {} in your controller.

_person is undefined, because it is defined in the inner scope of the ng-repeat="person in people". Currently your ng-click sets every device location to undefined.

In general you will have a lot of scope inheritance issues when using expressions in ngClicks instead of doing something like ng-click="setPerson()" and have $scope.setPerson = function () { ... } in your controller.

Please clarify what you want to do in more high level terms and I will update my answer.

Edit

Something like this looks more logical for me. However, I think you will have a lot of UX issues because the user is not able to change its choice after clicking one of the list items.
Note that if you put business logic in JS files instead of templates, it is easier to test.

 <div ng-app="devicesApp" ng-controller="MainCtrl">

    <div class="selectUser" ng-show="step === 'step1'">

        <h2>Who are you?</h2>

        <ul>

            <li ng-repeat="person in people">

                <a href="#" role="button" ng-click="selectPerson(person)">{{person}}</a>

            </li>

        </ul>

    </div>

    <div class="selectDevice" ng-show="step === 'step2'">

        <p>person: {{selected.person}}</p>

         <h2>Which phone?</h2>



        <ul>

            <li ng-repeat="device in devices"> <a class="btn btn-default" href="#" role="button" ng-click="selectDevice(device)">{{device.name}}</a>



            </li>

        </ul>

    </div>

    <div class="devicesView" ng-show="step === 'step3'">

        <ul>

            <li ng-repeat="device in devices">

                 <h3>{{device.name}}</h3>



                 <h4 class="deviceLocation">{{device.location}}</h4>



            </li>

        </ul>

    </div>

</div>

In JS file:

angular.module('devicesApp', []).controller('MainCtrl', function ($scope) {

    $scope.devices = [{

        name: 'iPhone 4',

        location: 'Desk'

    }, {

        name: 'iPhone 5',

        location: 'Desk'

    }, {

        name: 'iPhone 6',

        location: 'Desk'

    }, ];



    $scope.people = [

        'John',

        'Scott',

        'Adam'];



    $scope.selected = {};

    $scope.step = 'step1';



    $scope.selectPerson = function (person) {

        $scope.selected.person = person;

        $scope.step = 'step2';

    };

    

    $scope.selectDevice = function (device) {

        device.location = $scope.selected.person;

        $scope.step = 'step3';

    }

});

See this JSFiddle.