Angularjs：将数据返回到html的函数答案

【问题标题】：Angularjs: Function to return data back to htmlAngularjs：将数据返回到html的函数
【发布时间】：2016-07-07 19:04:50
【问题描述】：

我有一个奇怪的问题，我希望可以解决，但没有解决。

在我的模板中，我使用带有函数调用的表来检索用户名并显示该数据而不是用户的 ID。我已经在没有使用 html 侧调用的情况下单独测试了该函数，并且仅在 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>

我制作了一个 plunk 供你玩：https://embed.plnkr.co/WUBKSD4pBxJnzc9ntUuO/

在我试图找到解决问题的方法时，请告诉我您的想法。

【问题讨论】：

两个列标题的任何具体原因 - ID Name ID 姓名
@Naga Sai A - 这是页眉和页脚。我喜欢这种带有长列表的格式，其中大量数据可能会使疲惫的眼睛感到困惑。这实际上只是我一直以来的偏好。我希望这样做可以帮助那些可能迷路的人哈哈。

【解决方案2】：

要达到预期的结果，请将 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

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

通过 id 获取用户名，使用 Users[].required field name {{Users[y.created_by_id].display_name}}

使用上述逻辑，将避免编写额外的函数到 getUserByID

【讨论】：

如果用户的索引与单个用户的 id 值匹配，这将非常有用。也许有一种方法可以让对象索引与那些记录 id 匹配
如果用户不可用，是否显示空白？？
如果用户中没有具有 id 的用户，您是否尝试设置任何默认值？
@ Naga Sai A - 我的项目并没有真正解决无用户记录问题。就数据而言，一切都应该考虑在内。所以要回答这个问题，它必须是空白的。
@AochiToxx 我已经更新了 codepen - codepen.io/nagasai/pen/OXjEJE 与用户对象中的附加用户和部门对象中的 created_by_id 无效..希望这对你有用:)