复制键上的重复次数(角度)

时间:2015-11-19 14:54:30

标签: javascript json angularjs ng-repeat

JSON:

streams = [{ id: 0,
   codec_type: 'video',
   content: '1920x1040 - H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10' },
 { id: 1,
   codec_type: 'audio',
   content: '5.1(side) - cze - undefined' },
 { id: 2,
   codec_type: 'audio',
   content: '5.1(side) - eng - undefined' },
 { id: 3, codec_type: 'subtitle', content: 'cze - Czech' },
 { id: 4, codec_type: 'subtitle', content: 'eng - English' }];

Angular HTML标记:

<md-input-container ng-repeat="stream in streams">
  <label>{{stream.codec_type}}</label>
  <md-select ng-model="stream">
    <md-option value="{{stream.id}}">{{stream.content}}</md-option>
  </md-select>
</md-input-container>

嗨,我需要在JSON上找到重复的字符串,并在此(codec_type)重复的字符串下重复只有一个选项和许多选项。请你知道吗?谢谢

!!!更新!!!

我必须重新设计JSON并分别处理对象或类似的东西

CodePen

3 个答案:

答案 0 :(得分:1)

您可以使用两个不同的过滤器来完成您的工作:一个用于获取唯一编解码器类型列表,另一个用于获取适合该类型的编解码器列表。

CodePen example

HTML

<div ng-app="app">
  <div ng-controller="ctrl">
    <div ng-repeat="codec in streams | unique:'codec_type'">
      {{codec.codec_type}}
      <select ng-model="$parent.selected[codec.codec_type]" ng-options="stream as stream.content for stream in streams | codec:codec.codec_type track by stream.id">
      </select>
    </div>
    Selected streams: {{selected}}
  </div>
</div>

控制器

angular.module('app', [])
  .controller('ctrl', function ($scope) {
    $scope.selected = {
      'video': null,
      'audio': null,
      'subtitle': null
    };
    $scope.streams = [
      {
        id: 0,
        codec_type: 'video',
        content: '1920x1040 - H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10'
      },
      { id: 1,
        codec_type: 'audio',
        content: '5.1(side) - cze - undefined'
      },
      { id: 2,
        codec_type: 'audio',
        content: '5.1(side) - eng - undefined'
      },
      { id: 3,
        codec_type: 'subtitle',
        content: 'cze - Czech'
      },
      { id: 4,
        codec_type: 'subtitle',
        content: 'eng - English'
      }];
  })
  .filter('unique', function () {
    return function (items, id) {
      var filtered = [];
      var ids = {};

      angular.forEach(items, function (item) {
        if (typeof(ids[item[id]]) === 'undefined') {
          filtered.push(item);
          ids[item[id]] = true;
        }
      });

      return filtered;
    };
  })
  .filter('codec', function () {
    return function (items, codec) {
      var filtered = [];

      angular.forEach(items, function (item) {
        if (item.codec_type === codec) {
          filtered.push(item);
        }
      });

      return filtered;
    };
});

答案 1 :(得分:0)

使用ngOptions指令。

查看angularJs文档AngularJS Docs

示例:

<select ng-model="stream" ng-options="stream.codec_type for stream in streams>
   <option value=""> Choose Option </option>
</select>

有多种其他形式可以使用ng-options,我使用的只是:

label for value in array

我发布的链接会深入提及并解释每个表格,因此您可以选择哪一个适合您的需求。

答案 2 :(得分:0)

<强> 控制器:

    <md-input-container ng-repeat="stream in streams">
     <div ng-if=isUnique(stream.codec_type)>
      <label>{{stream.codec_type}}</label>
      <md-select ng-model="stream">
        <md-option value="{{stream.id}}">{{stream.content}}</md-option>
      </md-select>
     </div>
    </md-input-container>

HTML:

__init__.py