Question

我有这个奇怪的问题，我希望能够工作，但不能。

在我的模板中，我使用带有函数调用的表来检索用户名并显示该数据而不是用户的id。我已经自己测试了这个函数而没有使用html side调用，只在java脚本中运行。但我想知道为什么它不会将数据返回到html端。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.Users = [{
    "id": 1,
    "display_name": "John Deer",
    "role_id": 1,
  }, {
    "id": 2,
    "display_name": "Julie Deer",
  }, {
    "id": 3,
    "display_name": "John Smith",
  }];
  $scope.Departments = [{
    "id": 1,
    "created_by_id": 1,
    "last_modified_by_id": 2,
    "name": "Administrators",
  }, {
    "id": 2,
    "created_by_id": 2,
    "last_modified_by_id": 1,
    "name": "Guest"
  }, {
    "id": 3,
    "created_by_id": 1,
    "last_modified_by_id": 2,
    "name": "Manager"
  }];

  $scope.getUserByID = function(ID) {
    console.log('Running getUserByID with: ' + ID + ', as the ID.')
    angular.forEach($scope.Users, function(item, index) {
      if (ID == item.id) {
        console.log('Match is ' + this.Users[index].display_name);
        return this.Users[index].display_name;
      }
    }, $scope);
  }
});

/* Put your css in here */

.well {
  background-color: lightgrey;
}

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap-css@3.3.6" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div class="panel-heading clearfix">
    <div class="container col-sm-12">
      <div class="col-sm-4">
      </div>
      <div class="col-sm-4">
        <div class="form-group">
          <input type="text" class="form-control" ng-model="filterDepartments" value="Search" data-toggle="tooltip" data-placement="top" title="Type here to search in the list." placeholder="Search Here">
        </div>
      </div>
      <div class="col-sm-4">
      </div>
    </div>
  </div>
  <div class="col-sm-12 well">
    <h3>Departments</h3>
    <table id="example" class="display table" style="width: 100%; cellspacing: 0;">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Created By</th>
          <th>Modified By</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Created By</th>
          <th>Modified By</th>
        </tr>
      </tfoot>
      <tbody>
        <tr ng-repeat="y in Departments|filter:filterDepartments">
          <td>{{y.id}}</td>
          <td>{{y.name}}</td>
          <td>{{getUserByID(y.created_by_id)}}</td>
          <td>{{y.last_modified_by_id}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="col-sm-12 panel">
    <br>
    <br>
  </div>
  <div class="col-sm-12 well">
    <h3>Users</h3>
    <table id="example" class="display table" style="width: 100%; cellspacing: 0;">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>ID</th>
          <th>Name</th>
        </tr>
      </tfoot>
      <tbody>
        <tr ng-repeat="x in Users">
          <td>{{x.id}}</td>
          <td>{{x.display_name}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

我为你准备好了：https://issues.jenkins-ci.org/browse/JENKINS-34488

让我知道你的想法，因为我正试图找到解决问题的方法。

Answer 1

要实现预期结果，请将ng-repeat更改为

选项-1：使用现有的getUserByID函数，将返回值移出foreach循环

  $scope.getUserByID = function(ID) {
    console.log(this);
    console.log('Running getUserByID with: ' + ID + ', as the ID.')
    angular.forEach($scope.Users, function(item, index) {
      if (ID == item.id) {
        x = this.Users[index].display_name;
        console.log('Match is ' + this.Users[index].display_name);

      }
    }, $scope);
    return x
  }

Codepen - http://codepen.io/nagasai/pen/grxKrK

选项2-避免使用getUserById选项并使用Users对象

  <tbody>
    <tr ng-repeat="y in Departments|filter:filterDepartments">
      <td>{{y.id}}</td>
      <td>{{y.name}}</td>
      <td>{{Users[y.created_by_id].display_name}}</td>
      <td>{{y.last_modified_by_id}}</td>
    </tr>
  </tbody>

http://codepen.io/nagasai/pen/AXoaGB

使用用户[]获取用户名。必填字段{{Users [y.created_by_id] .display_name}}

使用上面提到的逻辑，将避免将其他函数写入getUserByID

Answer 2

对$ scope.getUserByID进行了一些更改。

一个是您可以直接使用item对象从中获取display_name属性。

另一个问题是在angular.forEach中放置一个返回值不会破坏循环，因此您只需要将一个本地var（userName）设置为最初可以检查值并最终设置为返回值的名称值。

$scope.getUserByID = function(ID) {
  console.log('Running getUserByID with: ' + ID + ', as the ID.')
  var userName;
  angular.forEach($scope.Users, function(item, index) {
    if (!userName) {
      if (ID == item.id) {
        userName = item.display_name;
        console.log('Match is ' + userName);
      }
    }
  }, $scope);

  return userName;
}

我已经将你的plunk分叉了。

Angularjs：将数据返回给html的函数

2 个答案: