Code Optimization with ng-repeat and ng-if

Question

Good morning everybody,

I have a table structured like that :

The code of the table is :

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

The JSON is :

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: ""}
        ]
    }
]

In fact I want to avoid to do the ng-repeat each time with the ng-if. I don't know if there is a method to verify the data and populate each data on the right place because sometimes a language is present on the JSON object, sometimes not.

As I said my code is working, I am just looking for an optimization.

Thanks :)

Answer 1

As i see you have static columns, so you can create array for it with needed order,

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

then repeat over it, and render needed element from languages array

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

Note: this way if you really can't change anything in javascript code.

// 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: ""
      }]
    }];
  });

td {
  border: 1px solid black;
}

<script data-require="[email protected]" 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>