how to take a value from ng-repeat in angularjs

Question

so I have a chat application, in the home.html will display a friend list of the user, I use ng-repeat to display the friend. and 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>

the example from this code is like this:

friends in this friend list is arranged by the time they become friend, so the new friend will be on bottom of the list. my question is how to take the value of the array from the friend list? this value will I use in my Speech Recognition. Example, if I want to chat with 'test' I will speak "Chat whit friend number 2". this is the speech recognition code:

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

So, how do I take the value from ng-repeat? thanks

Sol · Answer 1 · 2016-03-14T13:19:57.100

1

I think the easiest way is to use the same filtering chain as you did in ng-repeat, and then add item index of the required element.

In template it would be

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

If you need to do it inside the controller, then you need to use $filter service. Inject it to controller and do your filtering there:

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

Plunker example

added: For example you can make function 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 
}

edited Mar 14 '16 at 13:19

answered Mar 13 '16 at 18:05

Sol

337
2
8
20

what do you mean by [yourElementIndex] ? I dont understand litte bit, thanks – Khoirul Z Mar 14 '16 at 06:40
I mean your friends position number, as it displayed on your screenshot. To reach second row(friend Test) it would be 1 (second name, but array starts from 0 so first item index is 0, second item index is 1). Ryan would be 4. – Sol Mar 14 '16 at 09:42
so I fill it with [0/1/2/3] ? but every user have a different amount of friends, how do I make a loop from 0 to last index of friend? – Khoirul Z Mar 14 '16 at 10:33
Why do you need loop? As I understood you wanted to make voice command "Chat whit friend number 2" after that your task is to run some code with object corresponding to friend number 2. Right? – Sol Mar 14 '16 at 12:20
yeah I want to make like that, but I dont want to be that exact. I want make it simple, just one command, like this "chat with friend number (i)". If I make it exact, like "Chat whit friend number 1", how many command that I must made? like I said, every users have different amount of friends, if I just made until "Chat whit friend number 6", how about user that has 8 friends? – Khoirul Z Mar 14 '16 at 12:37
I updated my answer with example of function. Is it more clear now? – Sol Mar 14 '16 at 13:21
its more clear, but what I mean with 'i' is the length of the index, so if user have 3 friends it will be like (0 <= i >= 2), if have 5 friends (0 <= i >= 4). something like this. – Khoirul Z Mar 14 '16 at 14:10
So, do you understand now how to do what you were asking for? – Sol Mar 14 '16 at 14:20
still the 'i' part, how do take the length of the index in friend list. its loop? or something else? – Khoirul Z Mar 14 '16 at 15:30
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/106277/discussion-between-sol-and-khoirul-z). – Sol Mar 14 '16 at 19:52

score 1 · Answer 2 · answered Mar 15 '16 at 02:15

So, from the code that you give to me, I mix it with $index, because I read the type of $index is number. this is the code after I mix it:

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

And why I use 'chat with friend number ' + friendelement, so I dont need to make one, two, three, until God only knows. Based on my logic, if I use friendelement, user can said every number as long as the total friends. Am I wrong?

@Sol 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:32

how to take a value from ng-repeat in angularjs

2 Answers2