выбранный элемент не отобразится

Question

Все, что я хочу сделать, это показать выбранный элемент под списком основных элементов. Я делал это раньше, но по какой-то причине это просто не ведет себя, и я не могу понять, чего не хватает.

HTML, (обрезается вниз только в соответствующей части):

<ul> 
    <li data-ng-repeat="user in users" ng-click="$parent.selectUser($index)" ng-model="$index"> 
     {{user.userName}} 
    </li> 
</ul> 

<p>Selected: {{selected.userName}}, #<b>{{$index}}</b></p> 

в ЯШ:

(function (app) { 
    app.controller('UsersController', [ '$scope', function ($scope) { 
     $scope.selectUser = function ($index) { 
      $scope.selected = $index; 
      console.info('selected1=' + $index); 
     }; 
     $scope.selected = null; 
    }]); 
}); 

В журнале консоли отображается с индексом выбора, но ничего не происходит в последняя строка html - no selected.userName, no $ index. Я пробовал всевозможные вариации, и ничего не происходит. Что мне не хватает? Заранее спасибо!

(примечание:. Я не уверен, что я использую нг-модель там правильно, либо, но это, кажется, случайно или нет, я могу получить выбранный $ индекс, чтобы показать)

Answer 1

Вы пытаетесь использовать $index за пределами ng-repeat, который не сработает, так как $index доступен только в контексте ng-repeat.

Поскольку вы устанавливаете

$ scope.selected = $ индекс;

вам нужно использовать selected переменной

Я думаю, что вы хотите, чтобы выбрать пользователя на мыши. Это должно быть сделано следующим образом.

<ul> 
    <li data-ng-repeat="user in users" ng-click="selectUser(user,$index)" ng-model="$index"> 
     {{user.userName}} 
    </li> 
</ul> 

<p>Selected: {{selected.userName}}, #<b>{{index}}</b></p> 

Ваш контроллер будет иметь

$scope.selectUser = function (user,index) { 
      $scope.selected = user; 
      $scope.index=index; 
     };