我正在尝试创建一个页面,在该页面中,列表组中的项目很少,选择后应显示更多详细信息。
请在此处查看示例http://plnkr.co/edit/Oava3pA9OTsm80K58GdT?p=preview
如何根据列表组中选择的项目填充json文件中的详细信息?
到目前为止,这就是我所拥有的。
的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>
脚本:
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:
[
{
"$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]"
}
]
任何帮助将不胜感激。
我对编程非常陌生。如果我做错了,也请随意选择实现此目的的其他方法。
您可以使用ng-click指令指定单击某些内容时发生的情况。
因此,我$scope.selected
使用功能($scope.select(item)
)将点击的项目分配给该对象,然后将该对象的属性绑定到您的小细节部分。那可能是最简单的方法。
Ctrl
$scope.select = function(item) {
$scope.selected = item;
}
$scope.selected = {};
的HTML
<a class="list-group-item" ng-click="select(item)" ng-repeat="item in itemDetails">
{{item.name}}
</a>
然后该selected
对象将如下所示可用:
<h2>Name: {{selected.name}}</h2>
etc...
在这里查看我的示例:http : //plnkr.co/edit/mUMZ0VGO8l1ufV1JJNQE?p=preview
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句