Question

我正在尝试研究如何在指令中显示嵌套的JSON。下面的代码显示了指令中ng-repeat的天数列表。我想在每一行上添加一个ng-click，它将更新指令中的另一个转发器，该转发器将显示那些天产品的列表。这个新产品中继器应该在另一个div的日期转发器之外。我不确定那个逻辑应该是什么或放在哪里 - 在控制器或指令中？

所以这里是json ......

{
 "currentMonth":"November",
 "calendarDateView":[
{
  "dateOfTheMonth":1,
  "Products":[
  ]
},
{
  "dateOfTheMonth":2,
  "Products":[
    {
      "prodID":311
    },
    {
      "prodID":308
    }
  ]
}
{
  "dateOfTheMonth":3,
  "Products":[
    {
      "prodID":322
    }
  ]
}
]
}

我在指令中以ng-repeat显示...

//directive markup (inside calendarController)
<div ng-repeat="date in dates" ng-click>
{{date.dateOfTheMonth}}
</div>

//directive js
 calendarApp.directive('calendarDirective', function() {
    return {
        restrict: 'AE',
        templateUrl: 'calendar/calendarView.html',
        scope: {
            dates: '=dates'
        }
    };
});

我通过控制器传递指令的数据......

calendarApp.controller("calendarController", function($scope, availableDates) {
availableDates().success(function(data) {
    $scope.dates = data;
});
});

预期结果将是......

天数： 1 2 3

第2天的产品:(点击日期时填充，在此示例中为第2天） 311 308

任何帮助/建议表示赞赏。

Answer 1

现在解决方案包含自定义指令，您可以在任何您想要的地方重复使用（setId()和getId()被移动到指令的隔离范围）。

重写HTML：

<div ng-app="myApp" ng-controller="myCtrl">
    <my-dir dates="dates"></my-dir>
    <h2>Hi!</h2>
    <my-dir dates="dates"></my-dir>
</div>

模板v.1（calendar/calendarView.html） - 每个date对象下显示的产品ID列表：

<div>
  <div ng-repeat="date in dates.calendarDateView" ng-click="setId($index)">
  {{date.dateOfTheMonth}}
  <div ng-show="getId($index)">
    <div ng-repeat="item in date.Products">Product ID: {{item.prodID}}</div>
  </div>
</div>

模板v.2（calendar/calendarView.html） - 所有date个对象后显示的产品ID列表：

<div>
  <div ng-repeat="date in dates.calendarDateView" ng-click="setId($index)">
    {{date.dateOfTheMonth}}
  </div>
  <div ng-repeat="date in dates.calendarDateView">
    <div ng-show="getId($index)">
      <div ng-repeat="item in date.Products">Product ID: {{item.prodID}</div>
    </div>
  </div>
</div>

Controller（这次带myDir指令）：

angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
  $scope.dates = {
    "currentMonth":"November",
    "calendarDateView":[
      {
        "dateOfTheMonth":1,
        "Products":[
        ]
      },
      {
        "dateOfTheMonth":2,
        "Products":[
          {
            "prodID":311
          },
          {
            "prodID":308
          }
        ]
      },
      {
        "dateOfTheMonth":3,
        "Products":[
          {
            "prodID":322
          }
        ]
      }
    ]
  };
}])
 .directive("myDir", function(){
    return {
      restrict: "EA",
      templateUrl: "calendar/calendarView.html", 
      scope: {
        dates: "="
      },
      replace: true, 
      link: function(scope, element, attrs){
        scope.setId = function(index){
          var id = "id"+index;
          return scope[id] = !scope[id];
        };
        scope.getId = function(index){
          var id = "id" + index;
          return scope[id];
        }
      }
    }
  });

在指令中显示嵌套的JSON

1 个答案: