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