AngularJS根据所选项目动态填充json中的详细信息

阿里亚兹

我正在尝试创建一个页面,在该页面中,列表组中的项目很少,选择后应显示更多详细信息。

请在此处查看示例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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

AngularJS根据所选项目动态填充json中的详细信息

来自分类Dev

获取所选项目的详细信息

来自分类Dev

根据所选选项的数量将表单的详细信息插入到MySQL表中

来自分类Dev

如何从下拉列表中获取所选项目并将其提交到“详细信息”视图?

来自分类Dev

检查所选项目是否可见[详细信息视图中的虚拟ListView]

来自分类Dev

使用angularjs在新页面中查看所选行的详细信息

来自分类Dev

使用angularjs在新页面中查看所选行的详细信息

来自分类Dev

如何使用 tkinter 显示带有滚动条的列表框中所选项目的详细信息

来自分类Dev

在AngularJS中更新父子详细信息

来自分类Dev

角度,项目详细信息

来自分类Dev

角度,项目详细信息

来自分类Dev

在层次结构中填充顶级详细信息

来自分类Dev

从联系人列表中填充用户详细信息

来自分类Dev

在PayPal Checkout中禁用“运送详细信息”选项

来自分类Dev

访问groupby中每个项目的详细信息

来自分类Dev

AngularJS-根据所选项目从JSON更改Google Maps指令的范围

来自分类Dev

子项详细信息无法使用AngularJS在select中显示

来自分类Dev

从json的highchart中读回图表详细信息

来自分类Dev

使用URL命令查询JSON中的详细信息

来自分类Dev

以JSON格式查看表行详细信息中的内容

来自分类Dev

使用URL命令查询JSON中的详细信息

来自分类Dev

如何使用 python 访问 JSON 中的子详细信息?

来自分类Dev

无法从 JSON 数据中获取单个详细信息

来自分类Dev

如何根据日期列出详细信息

来自分类Dev

如何在MVC 3中显示网格中所选记录的详细信息?

来自分类Dev

获取登录项目详细信息

来自分类Dev

获取登录项目详细信息

来自分类Dev

如何从URL(json数据)显示另一个活动中列表的单个项目的详细信息?

来自分类Dev

在UITableViewCell的“详细信息”中显示信息

Related 相关文章

  1. 1

    AngularJS根据所选项目动态填充json中的详细信息

  2. 2

    获取所选项目的详细信息

  3. 3

    根据所选选项的数量将表单的详细信息插入到MySQL表中

  4. 4

    如何从下拉列表中获取所选项目并将其提交到“详细信息”视图?

  5. 5

    检查所选项目是否可见[详细信息视图中的虚拟ListView]

  6. 6

    使用angularjs在新页面中查看所选行的详细信息

  7. 7

    使用angularjs在新页面中查看所选行的详细信息

  8. 8

    如何使用 tkinter 显示带有滚动条的列表框中所选项目的详细信息

  9. 9

    在AngularJS中更新父子详细信息

  10. 10

    角度,项目详细信息

  11. 11

    角度,项目详细信息

  12. 12

    在层次结构中填充顶级详细信息

  13. 13

    从联系人列表中填充用户详细信息

  14. 14

    在PayPal Checkout中禁用“运送详细信息”选项

  15. 15

    访问groupby中每个项目的详细信息

  16. 16

    AngularJS-根据所选项目从JSON更改Google Maps指令的范围

  17. 17

    子项详细信息无法使用AngularJS在select中显示

  18. 18

    从json的highchart中读回图表详细信息

  19. 19

    使用URL命令查询JSON中的详细信息

  20. 20

    以JSON格式查看表行详细信息中的内容

  21. 21

    使用URL命令查询JSON中的详细信息

  22. 22

    如何使用 python 访问 JSON 中的子详细信息?

  23. 23

    无法从 JSON 数据中获取单个详细信息

  24. 24

    如何根据日期列出详细信息

  25. 25

    如何在MVC 3中显示网格中所选记录的详细信息?

  26. 26

    获取登录项目详细信息

  27. 27

    获取登录项目详细信息

  28. 28

    如何从URL(json数据)显示另一个活动中列表的单个项目的详细信息?

  29. 29

    在UITableViewCell的“详细信息”中显示信息

热门标签

归档