javascript - Calling a function in ng-repeat? - Stack Overflow

admin管理员组

文章数量:1332395

If I had some code similar to this, how would I go about calling the getUserName() function inside the ng-repeat. I attempted to do it earlier and it worked, however, it no longer functions.

 var user_reviews = [{
     user: {
         name: "John Doe"
     },
     review: {
         item: "Shure SE215"
     }
 }]

 var app = angular.module("ExApp", []);
 app.controller("TestController", function($scope) {
     $scope.reviews = user_reviews;
     $scope.getUserName = function() {
         return $scope.user.name;
     }
 });

HTML

<div ng-controller="TestController">
  <div ng-repeat="review in reviews">
    <p>{{review.getUserName()}}</p>
  </div>
</div> 

If I had some code similar to this, how would I go about calling the getUserName() function inside the ng-repeat. I attempted to do it earlier and it worked, however, it no longer functions.

 var user_reviews = [{
     user: {
         name: "John Doe"
     },
     review: {
         item: "Shure SE215"
     }
 }]

 var app = angular.module("ExApp", []);
 app.controller("TestController", function($scope) {
     $scope.reviews = user_reviews;
     $scope.getUserName = function() {
         return $scope.user.name;
     }
 });

HTML

<div ng-controller="TestController">
  <div ng-repeat="review in reviews">
    <p>{{review.getUserName()}}</p>
  </div>
</div> 

• javascript
• angularjs

Share Improve this question Follow edited Jun 27, 2016 at 6:40 Ismail RBOUH 10.5k22 gold badges2525 silver badges3737 bronze badges asked Jun 27, 2016 at 5:18 helloMundohelloMundo 8711 gold badge44 silver badges1111 bronze badges 8

• 2 y dont u directly take the name instead calling function <p>{{review.user.name}}</p> – Gayathri Mohan Commented Jun 27, 2016 at 5:22
• Im trying to call a function because I need to do some string manipulation inside the function. And @IsmailRBOUH that doesn't work, I have tried that already. – helloMundo Commented Jun 27, 2016 at 5:25
• If you don't need this as function, you shall not use function. – Patryk Perduta Commented Jun 27, 2016 at 5:25
• What version of Angular do you use? – Patryk Perduta Commented Jun 27, 2016 at 5:26
• 1 your review-variable doesn't have a function called getUserName. As i remember ng-repeat creates a child scope – iiro Commented Jun 27, 2016 at 5:35

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 4

You can pass the index from ng-repeat and return the user.name relevant to that index

  <div ng-controller="TestController">
      <div ng-repeat="review in reviews">
        <p>{{getUserName($index)}}</p>
      </div>
    </div> 

  var app = angular.module("ExApp", []); 
    app.controller("TestController", function($scope){
      $scope.reviews = user_reviews; 
      $scope.getUserName = function(index){
        return $scope.reviews[index].user.name; 
      }
    });

but if you are using function for this senario only i prefer do it without the function like this

<div ng-controller="TestController">
          <div ng-repeat="review in reviews">
            <p>{{review.user.name}}</p>
          </div>
        </div> 

Assuming scope.getUserName() isn't as trivial as it is in your example, you can do this instead.

    // Pass the `review` object as argument
    $scope.getUserName = function(review){
        return review.user.name; // get the user name from it
    }

HTML, pass review as parameter

<div ng-controller="TestController">
  <div ng-repeat="review in reviews">
    <p>{{getUserName(review)}}</p>
  </div>
</div> 

//You can directly access the username 
    <div ng-controller="TestController">
      <div ng-repeat="review in reviews">
        <p>{{review.user.name}}</p>
      </div>
    </div> 

//or You can pass the review as parameter and return username from that function.
    //HTML
    <div ng-controller="TestController">
      <div ng-repeat="review in reviews">
        <p>{{getUserName(review)}}</p>
      </div>
    </div> 
    //JS
    $scope.getUserName = function(review){
        return review.user.name; 
    }

You should change your code to this.

<div ng-controller="TestController"><div ng-repeat="review in reviews">
<p ng-repeat="userName in review.getUserName(review.name)">{{userName.name}}</p></div></div>

var user_reviews = [
  {
    user:{
      name: "John Doe"
    }, 
    review:{
      item: "Shure SE215"
    } 
  } 
]

var app = angular.module("ExApp", []); 
app.controller("TestController", function($scope){
  $scope.reviews = user_reviews; 
  $scope.getUserName = function(userName){
    return $scope.user.name; 
  }
});

本文标签： javascriptCalling a function in ngrepeatStack Overflow