Question

大家早上好，

我有一个像这样的结构表：

表的代码是：

<tr ng-repeat="item in captions | filter:search:strict">
    <td>{{item.CodeId}}</td>
    <td>{{item.EnumCaption}}</td>
    <td>
        <p ng-repeat="language in item.languages" 
             ng-if="language.CodeLanguage=='nl' && language.CodeCountry=='BE'">
            <a href="#" 
                onaftersave="updateCaption(language)"
                editable-textarea="language.Caption" 
                e-cols="25" 
                e-rows="{{(language.Caption.length/25)+3}}">{{language.Caption}}</a>
        </p>
    </td>
    <td>
        <p ng-repeat="language in item.languages" 
             ng-if="language.CodeLanguage=='en' && language.CodeCountry=='GB'">
            <a href="#" 
                onaftersave="updateCaption(language)"
                editable-textarea="language.Caption" 
                e-cols="25" 
                e-rows="{{(language.Caption.length/25)+3}}">{{language.Caption}}</a>
        </p>
    </td>
    <td>
        <p ng-repeat="language in item.languages" 
             ng-if="language.CodeLanguage=='fr' && language.CodeCountry=='BE'">  
            <a href="#" 
                onaftersave="updateCaption(language)"
                editable-textarea="language.Caption" 
                e-cols="25" 
                e-rows="{{(language.Caption.length/25)+3}}">{{language.Caption}}</a>
        </p>
    </td>
    <td>
        <p ng-repeat="language in item.languages" 
             ng-if="language.CodeLanguage=='de' && language.CodeCountry=='DE'">
            <a href="#" 
                onaftersave="updateCaption(language)"
                editable-textarea="language.Caption" 
                e-cols="25" 
                e-rows="{{(language.Caption.length/25)+3}}">{{language.Caption}}</a>
        </p>
    </td>

</tr>

JSON 是：

Captions = 
[
    {
        CodeId: 1,EnglishCaption: "",EnumCaption: "",
        languages: 
        [
            {Caption: "",CodeCountry: "DE",CodeId: 1,CodeLanguage: "de",EnumCaption: ""},
            {Caption: "",CodeCountry: "GB",CodeId: 1,CodeLanguage: "en",EnumCaption: ""},
            {Caption: "",CodeCountry: "BE",CodeId: 1,CodeLanguage: "fr",EnumCaption: ""},
            {Caption: "",CodeCountry: "BE",CodeId: 1,CodeLanguage: "nl",EnumCaption: ""}
        ]
    }
    ,
    {
        CodeId: 2,EnglishCaption: "",EnumCaption: "",
        languages: 
        [
            {Caption: "",CodeCountry: "DE",CodeId: 2,CodeLanguage: "de",EnumCaption: ""},
            {Caption: "",CodeCountry: "BE",CodeId: 2,CodeLanguage: "fr",EnumCaption: ""},
            {Caption: "",CodeCountry: "BE",CodeId: 2,CodeLanguage: "nl",EnumCaption: ""}
        ]
    }
    ,
    {
        CodeId: 3,EnglishCaption: "",EnumCaption: "",
        languages: 
        [
            {Caption: "",CodeCountry: "DE",CodeId: 3,CodeLanguage: "de",EnumCaption: ""},
            {Caption: "",CodeCountry: "GB",CodeId: 3,CodeLanguage: "en",EnumCaption: ""},
            {Caption: "",CodeCountry: "BE",CodeId: 3,CodeLanguage: "nl",EnumCaption: ""}
        ]
    }
]

事实上，我想避免每次使用ng-if进行ng-repeat。我不知道是否有一种方法可以验证数据并在正确的位置填充每个数据，因为JSON对象有时会出现一种语言，有时不会。

正如我所说，我的代码正在运行，我只是在寻找优化。

谢谢：）

Answer 1

因为我看到你有静态列，所以你可以用所需的顺序为它创建数组，

ng-init="lang = ['nl-BE', 'en-GB','fr-BE','de-DE']"

然后重复它，并从语言数组中提取所需的元素

<td ng-repeat="la in lang"
    ng-init="l = lang[$index].split('-'); language=(item.languages|filter:{CodeLanguage:l[0], CodeCountry:l[1]})[0]">
    <p ng-if="language">
        <a href="#" onaftersave="updateCaption(language)" editable-textarea="language.Caption" e-cols="25" e-rows="{{(language.Caption.length/25)+3}}">{{language.Caption}}</a>
    </p>
</td>

注意：如果你真的无法改变javascript代码中的任何内容，那就。

＆＃13;

// Code goes here

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.captions = [{
      CodeId: 1,
      EnglishCaption: "",
      EnumCaption: "",
      languages: [{
        Caption: "1",
        CodeCountry: "DE",
        CodeId: 1,
        CodeLanguage: "de",
        EnumCaption: ""
      }, {
        Caption: "2",
        CodeCountry: "GB",
        CodeId: 1,
        CodeLanguage: "en",
        EnumCaption: ""
      }, {
        Caption: "3",
        CodeCountry: "BE",
        CodeId: 1,
        CodeLanguage: "fr",
        EnumCaption: ""
      }, {
        Caption: "4",
        CodeCountry: "BE",
        CodeId: 1,
        CodeLanguage: "nl",
        EnumCaption: ""
      }]
    }, {
      CodeId: 2,
      EnglishCaption: "",
      EnumCaption: "",
      languages: [{
        Caption: "1",
        CodeCountry: "DE",
        CodeId: 2,
        CodeLanguage: "de",
        EnumCaption: ""
      }, {
        Caption: "2",
        CodeCountry: "BE",
        CodeId: 2,
        CodeLanguage: "fr",
        EnumCaption: ""
      }, {
        Caption: "3",
        CodeCountry: "BE",
        CodeId: 2,
        CodeLanguage: "nl",
        EnumCaption: ""
      }]
    }, {
      CodeId: 3,
      EnglishCaption: "",
      EnumCaption: "",
      languages: [{
        Caption: "1",
        CodeCountry: "DE",
        CodeId: 3,
        CodeLanguage: "de",
        EnumCaption: ""
      }, {
        Caption: "2",
        CodeCountry: "GB",
        CodeId: 3,
        CodeLanguage: "en",
        EnumCaption: ""
      }, {
        Caption: "3",
        CodeCountry: "BE",
        CodeId: 3,
        CodeLanguage: "nl",
        EnumCaption: ""
      }]
    }];
  });

＆＃13;

td {
  border: 1px solid black;
}

＆＃13;

<script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<div ng-app='app' ng-controller='ctrl'>
  <table ng-init="lang = ['nl-BE', 'en-GB','fr-BE','de-DE']">
    <tr>
      <td></td>
      <td></td>
      <td ng-repeat="la in lang">{{la}}</td>
    </tr>
    <tr ng-repeat="item in captions">
      <td>{{item.CodeId}}</td>
      <td>{{item.EnumCaption}}</td>
      <td ng-repeat="la in lang" ng-init="l = lang[$index].split('-'); language=(item.languages|filter:{CodeLanguage:l[0], CodeCountry:l[1]})[0]">
        <p ng-if="language">
          <a href="#" onaftersave="updateCaption(language)" editable-textarea="language.Caption" e-cols="25" e-rows="{{(language.Caption.length/25)+3}}">{{language.Caption}}</a>
        </p>
      </td>
    </tr>
  </table>
</div>

＆＃13;

使用ng-repeat和ng-if进行代码优化

1 个答案: