AnjularJS ng-repeat从不同的范围对象中获取项目

时间：2017-07-04 05:47:46

标签： javascript angularjs angularjs-ng-repeat

我有两个不同的范围对象。第一个是'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>

6 个答案:

答案 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，了解其对浏览器的有限支持。

样本：

＆＃13;
＆＃13; 
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"
    }
  ]
});
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 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"
    }];
}]);

以下是演示https://plnkr.co/edit/hjemVfAnrTJixpVF2NMN?p=preview

答案 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>

相关问题
最新问题