how to get value from length of index in ng-repeat

Question

I build chat application, that can display all friends in friend list using ng-repeat. this is the code:

<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>

ng-repeat="friend in datauser['data']['friends'] | filter : {nama : search}" is to display all friend, the newer friend will be at bottom of this index. this index will always add up when user have new friend. every users have different total friends, so the length of index is not exact its depends on how many friends that user have. my question is, how do I get the value from length of this index? because this value will be used in my speech recognition like this:

$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 'chat with friend number [i]':
        $scope.chatWith(friend.userid , friend.nama);
        break;
        default:
        navigator.notification.alert(msg, '', 'Undefined Command!','ok');
        break;

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

so, I will use 'chat with friend number [i]' as command, 'i' in here is the total length of the index in ng-repeat, 'i' is from 0 until length-1. How do I make this?

score 0 · Answer 1 · answered Mar 14 '16 at 16:25

0

If you want the index of the item being iterated use $index. If you mean the total length of the collection use collection.length

answered Mar 14 '16 at 16:25

Andrés Esguerra

849
5
15

I just need one from the index that shown from ng-repeat, so what do I use? – Khoirul Z Mar 14 '16 at 16:27
`$index` in the template, as pass it as a parameter to the function. Here's a fiddle: https://jsfiddle.net/4k05nent/1/ – Andrés Esguerra Mar 14 '16 at 16:28
where do I use this $index? and do I need import it in my controller? – Khoirul Z Mar 14 '16 at 16:31
Look at this fiddle: it shows how to pass it as an argument to a function: https://jsfiddle.net/4k05nent/3/ – Andrés Esguerra Mar 14 '16 at 16:34

score 0 · Answer 2 · answered Mar 14 '16 at 16:58

Looks like there is a small twist here. You are filtering the array based on the input, which implies that, the number/index of a friend can change based on the input string. Assuming that this is expected functionality, all you have to do is, 1) apply the filter again on your controller Syntax is $filter('filter')(array, expression, comparator) Documentation here

switch(result){
        case 'chat with friend number [i]':
        // Apply filter here
        var friends = $filter('filter')(datauser['data']['friends'], expression, comparator)
        // if friends.length < i -- cannot chat
        // else friend = friends[i-1]
        $scope.chatWith(friend.userid , friend.nama);
        break;
        default:
        navigator.notification.alert(msg, '', 'Undefined Command!','ok');
        break;

    };

2) Check that the number of friends are well with in the command limit, using if-else 3)If its in limit, all good. 4) Else, "There are only 3 friends. So you cannot chat with number 4."

I cannot add a plunker because I may not completely solve your problem because of the partial code available.

Cheers.

actually, your answer is little bit same as my guessing code, you can see it in my answer, its still have an error — Khoirul Z, Mar 14 '16 at 17:23
I got this question, http://stackoverflow.com/questions/22357197/angularjs-how-to-get-in-the-controller-the-index-of-an-item-in-a-ng-repeat-fil you can see the update answer plunker, I thought that my answer too, but I dont want `getIndexFromName` as function, because I want to take the 'i' value. can you help it? — Khoirul Z, Mar 15 '16 at 02:31

score 0 · Answer 3 · answered Mar 14 '16 at 17:22

this is my guessing code:

$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();
  };

actually in my speech recognition there are other commands. but after I add var filteredElements = ($filter('filter')(datauser['data']['friends'], {nama : search})); var friendelement = filteredElements[$index]; and case 'chat with friend number ' + friendelement: $scope.chatWith(friend.userid , friend.nama); break; my speech recognition didnt catch any listed command. I dont know where is the wrong one.

Dont add the lines above switch case. Add the lines in the case: chat with friend no. Also, var friendelement = filteredElements[i]; is correct. var friendelement = filteredElements[$index]; is wrong. Recognize i from the command. — Naga Sandeep, Mar 14 '16 at 17:32

how to get value from length of index in ng-repeat

3 Answers3