javascript AngularJS - 解析 JSON

AngularJS - parse JSON

提问by user1809790

I have a list of photographs being generated like the following snippet. Basically this would render a table like structure, with each photo being like a cell in this table. The ID of each photo like for example 1D means that the photo is in the first row of the table and in the 4th/D column.

我有一个正在生成的照片列表，如下面的片段。基本上这会渲染一个类似结构的表格，每张照片就像这个表格中的一个单元格。每张照片的 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>

I have a JSON which includes whether the photo is available or not. Basically the JSON string is something along these lines:

我有一个 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}]

Now basically what I need to do is to parse this JSON string and when any of these photos have "available:true" in the JSON string, I add a class photo-available in the HTML. I am new to angular and I am not sure if there is an easy way to assign a class to the available photos. Would be glad if someone can tell me what to use or how to do it.

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

Edit: Angular Code is this:

编辑：角度代码是这样的：

<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>                          

采纳答案by j.wittwer

Update3
The reason you are unable to restore previous selections is that you are overwriting the photo's selectedproperty with ng-init:

Update3
您无法恢复以前的选择的原因是您正在使用以下内容覆盖照片的selected属性ng-init：

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

When you combine these two, the 'selected'class will never be added because photo.selectedhas been hardcoded to false. You just need to remove ng-init, and the previous selection will trigger ng-classto add the correct class.

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

Here is a working demo: http://plnkr.co/tVdhRilaFfcn55h6mogu

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

Original answer
If the list of photos is not the same array as the list of available photos, you can use a directive to add the class.

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

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');
      }
    }
  }
});

Then attach it to each list item like this:

然后将其附加到每个列表项，如下所示：

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

Here is a demo: http://plnkr.co/WJCmLf2M39fcUnvOPyNA

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

Update1

更新1

Based on your update, I see that there is just one array populating the list, and it contains the availableflag. Therefore, you don't need a custom directive - ngClasswill work. Here it is integrated into your code sample:

根据您的更新，我看到只有一个数组填充列表，并且包含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>

I have update the plunker to demonstrate this.
http://plnkr.co/WJCmLf2M39fcUnvOPyNA

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

Update2
Since you need ngClassto add multiple classes, use it like this:

Update2
既然需要ngClass添加多个类，就这样使用：

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

Demonstration of selected+ available: http://plnkr.co/WJCmLf2M39fcUnvOPyNA

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

回答by GonchuB

Here's a plnkr with an example of how to solve your problem. You need to make use of both the ng-repeatand the ng-class:

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

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

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

As you can see, I also added some filters for your photos, they will come handy if you need to just show the available ones (for some reason).

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

Here's the documentation for angular $filter service

这是 angular $filter 服务的文档

回答by dave

I think this meets all your requirements:

我认为这满足您的所有要求：

$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}]');

and then you can just use ng-repeatto build the list:

然后你就可以用它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>

So what we are doing is we are taking our photo array, and for every one (ng-repeat="photo in photos") we are assigning that specific item to the variable photo. Then, if photo.availableis true, we assign the class photo-available (ng-class="{'photo-available': photo.available}").

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

Then, we can simply interpolate the id and text based off the properties row and position ({{photo.row}}{{photo.position}}). You could also have done that like this {{photo.row + photo.position}}but that could cause issues if they were both numbers.

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

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

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