javascript AngularJS 根据所选项目从 json 动态填充详细信息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24175119/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS dynamically populate details from json based on item selected
提问by aliaz
I am trying to create a page where you have few items in a list group which when selected should show more details.
我正在尝试创建一个页面，其中列表组中的项目很少，选择时应显示更多详细信息。
Please view the example here http://plnkr.co/edit/Oava3pA9OTsm80K58GdT?p=preview
请在此处查看示例http://plnkr.co/edit/Oava3pA9OTsm80K58GdT?p=preview
How can I populate the details from the json file based on the item that is selected in the list group?
如何根据列表组中选择的项目填充 json 文件中的详细信息？
This is what I have so far.
这就是我迄今为止所拥有的。
html:
html：
<div ng-controller=ItemsController>
<h3>Test</h3>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<ul class="list-group">
<a class="list-group-item" ng-repeat="item in itemDetails">{{item.name}}</a>
</ul>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-default">
<h2>Name: </h2>
<br />Address Line 1:
<br />Address Line 2:
<br />Suburb:
<br />Phone:
<br />Email:
</div>
</div>
</div>
</div>
script:
脚本：
var myItemsApp = angular.module('myItemsApp', []);
myItemsApp.factory('itemsFactory', ['$http', function($http){
var itemsFactory ={
itemDetails: function() {
return $http(
{
url: "mockItems.json",
method: "GET",
})
.then(function (response) {
return response.data;
});
}
};
return itemsFactory;
}]);
myItemsApp.controller('ItemsController', ['$scope', 'itemsFactory', function($scope, itemsFactory){
var promise = itemsFactory.itemDetails();
promise.then(function (data) {
$scope.itemDetails = data;
console.log(data);
});
}]);
json:
json：
[
{
"$id":"1",
"name":"Test itemName 1",
"themeName":"ASD",
"addressLine1":"18 Banksia Street",
"addressLine2":null,
"suburb":"Heidelberg",
"state":"VIC",
"postalCode":"3084",
"contactPhone":"+61 3 123456",
"emailAddress":"[email protected]"
},
{
"$id":"2",
"name":"Test itemName 2",
"themeName":"WER",
"addressLine1":"11 Riverview Place",
"addressLine2":"Metroplex on Gateway",
"suburb":"Murarrie",
"state":"QLD",
"postalCode":"4172",
"contactPhone":"1300 73123456",
"emailAddress":"[email protected]"
},
{
"$id":"3",
"name":"Test itemName 3",
"themeName":"ERT",
"addressLine1":"60 Waterloo Road",
"addressLine2":null,
"suburb":"North Ryde",
"state":"NSW",
"postalCode":"2113",
"contactPhone":"123456",
"emailAddress":"[email protected]"
}
]
Any help would be greatly appreciated.
任何帮助将不胜感激。
I am very new to programming. Please also feel free to alternative ways of achieving this if I have done it wrong.
我对编程很陌生。如果我做错了，也请随意使用其他方法来实现这一点。
回答by Shomz
You can use the ng-click directive to specify what happens when you click something.
您可以使用 ng-click 指令来指定单击某物时会发生什么。
So I made it assign the clicked item to the $scope.selectedobject using a function ($scope.select(item)) and then I bound the properties of that object to your little details section. That's probably the simplest way to do it.
因此，我$scope.selected使用函数 ( $scope.select(item))将单击的项目分配给对象，然后将该对象的属性绑定到您的小细节部分。这可能是最简单的方法。
Ctrl
控制
$scope.select = function(item) {
$scope.selected = item;
}
$scope.selected = {};
HTML
HTML
<a class="list-group-item" ng-click="select(item)" ng-repeat="item in itemDetails">
{{item.name}}
</a>
And the selectedobject is then available like this:
然后该selected对象像这样可用：
<h2>Name: {{selected.name}}</h2>
etc...
See my example here: http://plnkr.co/edit/mUMZ0VGO8l1ufV1JJNQE?p=preview
在此处查看我的示例：http: //plnkr.co/edit/mUMZ0VGO8l1ufV1JJNQE?p=preview
