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'
    ];
});

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'
    ];
});

• javascript
• html
• angularjs
• angularjs-ng-repeat
• angularjs-ng-click

• possible duplicate of Binding ng-model inside ng-repeat loop in AngularJS – vinayakj Commented May 9, 2015 at 14:03

1 Answer 1

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.