我有两个不同的范围对象。第一个是'Details'对象，第二个是'Country'对象。我想使用“详细信息”对象中的“CountryId”从我的“Country”对象中获取数据。
我在我的范围内创建了一个函数，我可以获取我的国家数据（请参阅下面的代码。它工作正常）但我确信它应该是AngularJS中更好的方法。 有吗？
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.FindSpecificItem = function(obj, field, value, returnField) {
return jQuery.grep(obj, function(item) {
return (item[field] == value);
})[0][returnField];
};
$scope.details = [{
"Name": "John",
"CountryId": "1"
}, {
"Name": "Dave",
"CountryId": "2"
}]
$scope.Countries = [{
"Id": "1",
"Country": "USA"
}, {
"Id": "2",
"Country": "England"
}]
});
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="d in details">
<td>{{d.Name}}</td>
<td>{{FindSpecificItem(Countries,"Id",d.CountryId,"Country")}}</td>
</tr>
</table>
</div>
</body>
</html>
答案 0 :(得分：2)
尝试使用角度forEach循环。像这样：
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.FindSpecificItem = function(id) {
var country1 = "";
angular.forEach($scope.Countries,function(country){
if(country.Id == id)
country1 = country.Country;
})
return country1;
};
$scope.details = [
{
"Name": "John",
"CountryId": "1"
},
{
"Name": "Dave",
"CountryId": "2"
}]
$scope.Countries = [
{
"Id": "1",
"Country": "USA"
},
{
"Id": "2",
"Country": "England"
}]
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="d in details">
<td>{{d.Name}}</td>
<td>{{FindSpecificItem(d.CountryId)}}</td>
</tr>
</table>
</div>
答案 1 :(得分：2)
您可以使用filter功能
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.getCountry=function(id){
console.log("Calling "+id);
var countries=$scope.Countries.filter(function(item){
console.log(item.Id===id)
return item.Id===id;
})
return countries[0].Country;
}
$scope.details = [{
"Name": "John",
"CountryId": "1"
},
{
"Name": "Dave",
"CountryId": "2"
}
]
$scope.Countries = [{
"Id": "1",
"Country": "USA"
},
{
"Id": "2",
"Country": "England"
}
]
});
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="d in details">
<td>{{d.Name}}</td>
<td>{{getCountry(d.CountryId)}}
</td>
</tr>
</table>
</div>
</body>
</html>
答案 2 :(得分：1)
这里不需要使用jquery。只需使用简单的for循环返回它，不要使用angular.forEach()，因为它不支持break。
试试这个
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.FindSpecificItem = function(value) {
for (var i = 0; i<$scope.Countries.length; i++) {
if ($scope.Countries[i].Id == value.CountryId) {
return $scope.Countries[i].Country;
}
}
};
$scope.details = [
{
"Name": "John",
"CountryId": "1"
},
{
"Name": "Dave",
"CountryId": "2"
}]
$scope.Countries = [
{
"Id": "1",
"Country": "USA"
},
{
"Id": "2",
"Country": "England"
}]
});
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="d in details">
<td>{{d.Name}}</td>
<td>{{FindSpecificItem(d)}}</td>
</tr>
</table>
</div>
</body>
</html>
答案 3 :(得分：1)
为了完全使用JQuery，您可以使用ECMAScript 6，array.Find作为：
一行代码：
$scope.FindSpecificItem = function(Id) {
return $scope.Countries.find(x => x.Id === Id).Country;
}
请参阅documentation，了解其对浏览器的有限支持。
样本：
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.FindSpecificItem = function(Id) {
return $scope.Countries.find(x => x.Id === Id).Country;
}
$scope.details = [{
"Name": "John",
"CountryId": "1"
},
{
"Name": "Dave",
"CountryId": "2"
}
]
$scope.Countries = [{
"Id": "1",
"Country": "USA"
},
{
"Id": "2",
"Country": "England"
}
]
});<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="d in details">
<td>{{d.Name}}</td>
<td>{{FindSpecificItem(d.CountryId)}}</td>
</tr>
</table>
</div>
</body>
</html>
答案 4 :(得分：1)
您只需使用angularJS的过滤器即可实现。
过滤器可以在JS和HTML中使用。这里我提到HTML中的过滤器，因为上面已经提到了JS中的过滤器。
在HTML
中试试<div ng-controller="ExampleController">
<table>
<tr ng-repeat="d in details">
<td>{{d.Name}}</td>
<td ng-repeat="country in Countries|
filter :{Id:d.CountryId }">{{country.Country}}</td>
</tr>
</table>
</div>
这是没有额外JS方法的控制器
.controller('ExampleController', ['$scope', function($scope) {
$scope.details = [
{
"Name": "John",
"CountryId": "1"
},
{
"Name": "Dave",
"CountryId": "2"
}];
$scope.Countries = [
{
"Id": "1",
"Country": "USA"
},
{
"Id": "2",
"Country": "England"
}];
}]);
答案 5 :(得分：0)
试试这个
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.FindSpecificItem = function(countryId) {
var result = "";
angular.forEach($scope.Countries,function(country){
if(country.Id == countryId)
result = country.Country;
})
return result;
};
$scope.details = [{
"Name": "John",
"CountryId": "1"
}, {
"Name": "Dave",
"CountryId": "2"
}]
$scope.Countries = [{
"Id": "1",
"Country": "USA"
}, {
"Id": "2",
"Country": "England"
}]
});
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="d in details">
<td>{{d.Name}}</td>
<td>{{FindSpecificItem(d.CountryId)}}
</tr>
</table>
</div>