AngularJS - 解析 JSON答案

【问题标题】：AngularJS - parse JSONAngularJS - 解析 JSON
【发布时间】：2014-04-06 17:04:03
【问题描述】：

我有一个正在生成的照片列表，如下面的 sn-p。基本上，这将呈现一个类似结构的表格，每张照片就像该表格中的一个单元格。每张照片的 ID 例如 1D 表示照片在表格的第一行和第 4/D 列。

<ul>
   <li class="row">
      <ul>
            <li class="photo" id="photo-1A">1A</li>
            <li class="photo" id="photo-1B">1B</li>
            <li class="photo" id="photo-1C">1C</li>
            <li class="photo" id="photo-1D">1D</li>
            <li class="photo" id="photo-2A">2A</li>
            <li class="photo" id="photo-2B">2B</li>
            <li class="photo" id="photo-2C">2C</li>
            <li class="photo" id="photo-2D">2D</li>
            <li class="photo" id="photo-3A">3A</li>
            <li class="photo" id="photo-3B">3B</li>
            <li class="photo" id="photo-3C">3C</li>
            <li class="photo" id="photo-3D">3D</li>
      </ul>
   </li>
</ul>

我有一个 JSON，其中包括照片是否可用。基本上 JSON 字符串是这样的：

[{"row":1,"position":"A","available":true},{"row":1,"position":"B","available":false},{"row":1,"position":"C","available":false},{"row":1,"position":"D","available":false},{"row":2,"position":"A","available":true},{"row":2,"position":"B","available":false},{"row":2,"position":"C","available":false},{"row":2,"position":"D","available":false},{"row":3,"position":"A","available":true},{"row":3,"position":"B","available":false},{"row":3,"position":"C","available":false},{"row":3,"position":"D","available":false}]

现在基本上我需要做的是解析这个 JSON 字符串，当这些照片中的任何一个在 JSON 字符串中具有“available:true”时，我在 HTML 中添加一个类 photo-available。我是 Angular 的新手，我不确定是否有一种简单的方法可以为可用的照片分配一个类。如果有人能告诉我要使用什么或怎么做，我会很高兴。

编辑：Angular 代码是这样的：

<ul class="table-rows">
    <li class="photo-row" ng:repeat="photo in photos" ng:class="'photo-' + photo.row + photo.position">
        <ul class="table-photos">
            <li class="photo photo-available" ng:class="selectedOrNot(photo)" ng:init="photo.selected = false" ng:click="photo.selected = !photo.selected">

         <div class="photo-number">{{photo.row + photo.position}}</div>                          
        </li>                                   
     </ul>                                
  </li>
  <div class="clear"></div>

【问题讨论】：

angular.fromJson(json) 返回一个您可以使用的对象
@c0d3junk13 感谢您的回复。我设法通过使用 JSON.parse(sessionStorage.seatBookings) 得到了相同的结果，但是现在我完全被困在如何通过它们中的每一个上，然后当我发现 available=true 时，我将类 photo-available 分配给对应的

【解决方案1】：

更新3
您无法恢复以前的选择的原因是您正在用ng-init 覆盖照片的selected 属性：

ng:init="photo.selected = false"
ng-class="{'selected': photo.selected, 'available': photo.available}"

当您将这两者结合起来时，将永远不会添加 'selected' 类，因为 photo.selected 已被硬编码为 false。你只需要删除ng-init，之前的选择会触发ng-class添加正确的类。

这是一个工作演示：http://plnkr.co/tVdhRilaFfcn55h6mogu

原答案
如果照片列表与可用照片列表不是同一个数组，则可以使用指令添加类。

app.directive('availablePhoto', function($filter) {
  return {
    restrict: 'A',
    scope: true,
    link: function(scope, element, attr) {
      var id = attr.id

      var regex = /photo-(.)(.)/g;
      var match = regex.exec(id);

      var row = match[1]
      var position = match[2]

      var photo = $filter('filter')(scope.photos, {row:row, position:position}, false)

      console.log(photo);

      if (photo[0].available) {
        element.addClass('available');
      }
    }
  }
});

然后像这样将它附加到每个列表项：

<li class="photo" id="photo-1A" available-photo>1A</li>

这是一个演示：http://plnkr.co/WJCmLf2M39fcUnvOPyNA

更新1

根据您的更新，我发现列表中只有一个数组，它包含available 标志。因此，您不需要自定义指令 - ngClass 将起作用。在这里它被集成到您的代码示例中：

<ul class="table-rows">
  <li class="photo-row" ng:repeat="photo in photos" ng:class="'photo-' + photo.row + photo.position">
    <ul class="table-photos">
      <li class="photo" ng-class="{'available': photo.available}" ng:init="photo.selected = false" ng:click="photo.selected = !photo.selected">
        <div class="photo-number">{{photo.row + photo.position}}
        </div>                          
      </li>                                   
    </ul>
  </li>
  <div class="clear"></div>  
</ul>

我已经更新了 plunker 来演示这一点。
http://plnkr.co/WJCmLf2M39fcUnvOPyNA

更新2
既然你需要ngClass来添加多个类，就这样使用它：

ng-class="{'selected': photo.selected, 'available': photo.available}"

selected+available的演示：http://plnkr.co/WJCmLf2M39fcUnvOPyNA

【讨论】：

我已经更新了我的问题并包含了生成
- 中的“可用照片”基本上是如何做到的。另外，我不确定您的正则表达式和代码实际上是做什么的。如果您能给我一个快速的解释，将非常高兴
根据您的更新，我的代码不是必需的，因为没有两个数组。我会在几分钟内更新。
只是为了更好地了解，我已在此处上传了我的代码：goo.gl/MZK0Nb，以便您更好地了解实际情况。这里的问题只是针对一个相关的场景
基本上我仍然需要我拥有的 ng-class。是否可以添加到它，并有类似的东西：ng:class="selectedOrNot(photo); {'available': photo.available}"？（你可以在这里看到工作的东西：goo.gl/MZK0Nb。基本上，当用户点击座位时， selectedOrNot 会设置高亮状态）
@user1809790，我无法打开您的 goo.gl 链接，但我想我了解您正在尝试使用 ngClass 有条件地应用两个类。请查看更新的答案。

【解决方案2】：

这是一个 plnkr，其中包含如何解决您的问题的示例。你需要同时使用ng-repeat 和ng-class：

http://plnkr.co/edit/hk68qp4yhEjcvOkzmIuL?p=preview

如您所见，我还为您的照片添加了一些过滤器，如果您只需要显示可用的过滤器（出于某种原因），它们会派上用场。

这是 Angular $filter service 的文档

【讨论】：

我已经添加了生成
只是为了更好地了解，我已在此处上传了我的代码：goo.gl/MZK0Nb，以便您更好地了解实际情况。这里的问题只是针对一个相关的场景

【解决方案3】：

我认为这符合您的所有要求：

$scope.photos = JSON.parse('[{"row":1,"position":"A","available":true},{"row":1,"position":"B","available":false},{"row":1,"position":"C","available":false},{"row":1,"position":"D","available":false},{"row":2,"position":"A","available":true},{"row":2,"position":"B","available":false},{"row":2,"position":"C","available":false},{"row":2,"position":"D","available":false},{"row":3,"position":"A","available":true},{"row":3,"position":"B","available":false},{"row":3,"position":"C","available":false},{"row":3,"position":"D","available":false}]');

然后您可以使用ng-repeat 来构建列表：

<ul>
   <li class="row">
      <ul>
        <li ng-repeat="photo in photos" class="photo" ng-class="{'photo-available': photo.available}" id="photo-{{photo.row}}{{photo.position}}">{{photo.row}}{{photo.position}}</li>
      </ul>
   </li>
</ul>

所以我们正在做的是获取我们的照片数组，并且对于每一个 (ng-repeat="photo in photos")，我们将那个特定的项目分配给变量 photo。然后，如果photo.available 为真，我们分配类 photo-available (ng-class="{'photo-available': photo.available}")。

然后，我们可以根据属性行和位置 ({{photo.row}}{{photo.position}}) 简单地插入 id 和文本。您也可以像 {{photo.row + photo.position}} 那样这样做，但如果它们都是数字，则可能会导致问题。

http://plnkr.co/edit/hBkoyHVtIwF60MKDF84j?p=preview

【讨论】：

那么...您从我的 Plnkr 复制并粘贴了一些代码？我看到您的过滤器与我添加到我的答案中的过滤器相同，但您没有使用它...不酷的人。
是的，我想要一个有角度设置的 Plnkr，这不像是我偷了你的答案。
你接受了我的回答并修剪了一些我添加的额外过滤器，以防他需要它们。
不，您删除了您的帖子，修改了您的 plnkr，然后取消删除了您的帖子。当我做我的时，你的根本没有 ng-class
事实上，plnkr 可以让你看到修订，所以继续点击前两个版本中的任何一个。看起来你实际上是从我那里复制过来的