如何在angularjs中从ng-repeat中获取一个值

Question

所以我有一个聊天应用，在home.html中会显示用户的好友列表，我使用ng-repeat来显示好友。这是代码：

<div class="scrollable">
  <div class="scrollable-content">

    <div class="list-group">
      <div class="list-group-item">
        <h5>Welcome <b>{{  datauser['data']['nama'] }}</b></h5>
        <input type="search" class="form-control app-search" placeholder="Search.." data-ng-model="search" />
        <div class="list-group-item media" href="#"  ng-repeat="friend in datauser['data']['friends'] | filter : {nama : search}"  data-ng-click="chatWith(friend.userid , friend.nama)" data-ng-class="(friend['ischat'] ? 'blokchat' :'')">
            <div class="pull-left">
                <i class="fa fa-user chat-user-avatar"></i>
            </div>
            <div class="media-body" >
                <h5 class="media-heading">{{friend.nama}} <span class="badge bg-danger" data-ng-if="friend['ischat']">*</span></h5>
            </div>
        </div>
    </div>
  </div>
</div>

此代码中的示例如下所示：

此好友列表中的好友是按他们成为好友的时间排列的，因此新好友将位于列表底部。我的问题是如何从好友列表中获取数组的值？我将在我的语音识别中使用这个值。例如，如果我想和“test”聊天，我会说“Chat whitfriend number 2”。 这是语音识别代码：

$scope.recog = function() {
    var recognition = new SpeechRecognition();
    recognition.onresult = function(event) {
    var msg = 'Sorry, there is no such a command like that';
    var result = event.results[0][0].transcript;
        switch(result){
        case 'go to home':
        $location.path('/home');
            break;
        case 'go to add friend':
        $location.path('/addfriend');
            break;
        case 'go to friend request':
        $location.path('/friendrequest');
            break;
        case 'go to pending request':
        $location.path('/penddingrequest');
            break;
        case 'add':
        $scope.addfriends();
            break;
        case 'send':
        $scope.sendMessage();
            break;
        default:
        navigator.notification.alert(msg, '', 'Undefined Command!','ok');
        break;

    };
    $scope.$apply()
    };
    recognition.start();
  };

那么，我如何从 ng-repeat 中获取值？谢谢

Answer 1

我认为最简单的方法是使用与 ng-repeat 中相同的过滤链，然后添加所需元素的项目索引。

在模板中是

{{ (friend in datauser['data']['friends'] | filter : {nama : search})[yourElementIndex] }}

如果需要在控制器内部进行，则需要使用 $filter 服务。将其注入控制器并在那里进行过滤：

var filteredElements = ($filter('filter')(datauser['data']['friends'], {nama : search}))
var yourElement = filteredElements[yourElementIndex]

Plunker example

补充： 例如，您可以创建函数 startChatWithFriend(i);

$scope.startChatWithFriend = function(i) {
  var filteredFriends = ($filter('filter')(datauser['data']['friends'], {nama : search}));
  var friendToChatWith = filteredFriends[i];
  //now friendToChatWith contains friend that have number i 
  .... 
  .... other code using friendToChatWith 
}

Answer 2

所以，从你给我的代码中，我将它与 $index 混合，因为我读到 $index 的类型是数字。这是我混合后的代码：

$scope.recog = function() {
    var recognition = new SpeechRecognition();
    recognition.onresult = function(event) {
    var msg = 'Sorry, there is no such a command like that';
    var filteredElements = ($filter('filter')(datauser['data']['friends'], {nama : search}));
    var friendelement = filteredElements[$index];
    var result = event.results[0][0].transcript;
        switch(result){
        case 'login':
        $scope.loginFn();
            break;
        case 'sign up':
        $location.path('/register');
            break;
        case 'register':
        $scope.registerFn();
            break;
        case 'cancel':
        $scope.cancelregisterFn();
            break;
        case 'chat with friend number ' + friendelement:
        $scope.chatWith(friend.userid , friend.nama);
            break;
        case 'go to home':
        $location.path('/home');
            break;
        case 'go to add friend':
        $location.path('/addfriend');
            break;
        case 'go to friend request':
        $location.path('/friendrequest');
            break;
        case 'go to pending request':
        $location.path('/penddingrequest');
            break;
        case 'add':
        $scope.addfriends();
            break;
        case 'send':
        $scope.sendMessage();
            break;
        default:
        navigator.notification.alert(msg, '', 'Undefined Command!','ok');
        break;

    };
    $scope.$apply()
    };
    recognition.start();
  };

实际上在我的语音识别中还有其他命令。但是在我添加var filteredElements = ($filter('filter')(datauser['data']['friends'], {nama : search})); var friendelement = filteredElements[$index]; 和case 'chat with friend number ' + friendelement: $scope.chatWith(friend.userid , friend.nama); break; 之后，我的语音识别没有捕捉到任何列出的命令。不知道哪里错了。

以及为什么我使用'chat with friend number ' + friendelement，所以我不需要制作一二三，直到只有上帝知道。根据我的逻辑，如果我使用friendelement，用户可以说出每个数字，只要总朋友数。我错了吗？