Question

问题是我有一个列表的人和他们的城市ID。我想通过函数从另一个列表中获取城市名称。

<table class="table">
<tr>
<th>#</th>
<th>Name</th>
<th>Type</th>
<th>City</th>
</tr>

<tr ng-repeat="item in samples">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.type}}</td>
<td>{{getCity(item.city)}}</td>
</tr>
</table>

和控制器：

$scope.samples = [
{id: 1, name: "alex", type: "Average", city: 12},
{id: 2, name: "Alex", type: "Average", city: 12},
{id: 3, name: "Mia", type: "Medium", city: 13},
{id: 4, name: "Sasha", type: "Top", city: 14},
{id: 5, name: "Eric", type: "Top", city: 12},
{id: 6, name: "Taz", type: "Average", city: 14},
{id: 7, name: "Normai", type: "Low", city: 13},
{id: 8, name: "Jim", type: "Average", city: 11}];


$scope.city = [
{id: 11, name: "Dallas"},
{id: 12, name: "Los Angeles"},
{id: 13, name: "New York"},
{id: 14, name: "Washington"}
];

$scope.getCity = function(name) { 
angular.forEach($scope.city, function(value, key){

  if(value.id == name){
    $scope.city_name = value.name;
  }
  return $scope.city_name;
  });
}

以下是Fiddle了解详情。

Answer 1

你是错误地方的回报价值。我只是更新了jsfiddle you can check here。

以下是代码的更改。

$scope.getCity = function(name) {  
   $scope.city_name = "";
  angular.forEach($scope.city, function(value, key){ 
      if(value.id == name){
        $scope.city_name = value.name;
      } 
   });
  return $scope.city_name;
}

}]);

Answer 2

尝试此功能

$scope.getCity = function(id) {
  var city = $scope.city.filter(function(c){ return angular.equals(c.id, id); })[0];
  return city.name;
}

Answer 3

AngularJS forEach循环不支持在循环内部中断或返回，请参考this回答。

所以你可以在foreach循环之后返回值，或者你可以使用简单的for循环。

使用forEach循环

尝试此操作

<!DOCTYPE html>
<html ng-app="app">

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
	<script >
		var app = angular.module('app', []);
		app.controller('myCtrl',function($scope, $http){
			$scope.samples = [
			{id: 1, name: "alex", type: "Average", city: 12},
			{id: 2, name: "Alex", type: "Average", city: 12},
			{id: 3, name: "Mia", type: "Medium", city: 13},
			{id: 4, name: "Sasha", type: "Top", city: 14},
			{id: 5, name: "Eric", type: "Top", city: 12},
			{id: 6, name: "Taz", type: "Average", city: 14},
			{id: 7, name: "Normai", type: "Low", city: 13},
			{id: 8, name: "Jim", type: "Average", city: 11}];


			$scope.city = [
			{id: 11, name: "Dallas"},
			{id: 12, name: "Los Angeles"},
			{id: 13, name: "New York"},
			{id: 14, name: "Washington"}
			];

			$scope.getCity = function(name) { 
				angular.forEach($scope.city, function(value, key){
					if(value.id == name){
						$scope.city_name = value.name;
					}
				});
     		return $scope.city_name;;
			}
		});
	</script>
</head>
<body ng-controller='myCtrl'>
	<table class="table">
		<tr>
			<th>#</th>
			<th>Name</th>
			<th>Type</th>
			<th>City</th>
		</tr>

		<tr ng-repeat="item in samples">
			<td>{{item.id}}</td>
			<td>{{item.name}}</td>
			<td>{{item.type}}</td>
			<td>{{getCity(item.city)}}</td>
		</tr>
	</table>
</body>

</html>

尝试使用for循环

  <!DOCTYPE html>
  <html ng-app="app">

  <head>
  	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  	<script >
  		var app = angular.module('app', []);
  		app.controller('myCtrl',function($scope, $http){
  			$scope.samples = [
  			{id: 1, name: "alex", type: "Average", city: 12},
  			{id: 2, name: "Alex", type: "Average", city: 12},
  			{id: 3, name: "Mia", type: "Medium", city: 13},
  			{id: 4, name: "Sasha", type: "Top", city: 14},
  			{id: 5, name: "Eric", type: "Top", city: 12},
  			{id: 6, name: "Taz", type: "Average", city: 14},
  			{id: 7, name: "Normai", type: "Low", city: 13},
  			{id: 8, name: "Jim", type: "Average", city: 11}];


  			$scope.city = [
  			{id: 11, name: "Dallas"},
  			{id: 12, name: "Los Angeles"},
  			{id: 13, name: "New York"},
  			{id: 14, name: "Washington"}
  			];

  			$scope.getCity = function(name) { 
  				for (var i = 0; i < $scope.city.length; i++) {
  					if($scope.city[i].id == name){
  						$scope.city_name = $scope.city[i].name;
  						return $scope.city_name;
  					}
  				}
  			}
  		});
  	</script>
  </head>
  <body ng-controller='myCtrl'>
  	<table class="table">
  		<tr>
  			<th>#</th>
  			<th>Name</th>
  			<th>Type</th>
  			<th>City</th>
  		</tr>

  		<tr ng-repeat="item in samples">
  			<td>{{item.id}}</td>
  			<td>{{item.name}}</td>
  			<td>{{item.type}}</td>
  			<td>{{getCity(item.city)}}</td>
  		</tr>
  	</table>
  </body>

  </html>

循环调用函数

3 个答案: