Issue with calling function in ng-repeat loop

Question

<div class="odiintexpand" ng-repeat="details in odata_odi.PRODUCT">
    <div class="clm1" id="product1">{{details.COMPONENT}}</div>
    <div class="clm2" ng-show="cp.getColour('odiintexpand','clm2','{{details.ASKERNEL}}')">{{details.ASKERNEL}}</div>
    <div class="clm3" ng-show="cp.getColour('odiintexpand','clm3','{{details.SOA}}')">{{details.SOA}}</div>
    <div class="clm4" ng-show="cp.getColour('odiintexpand','clm4','{{details.ODIINT}}')">{{details.ODIINT}}</div>
    <div class="clm5" ng-show="cp.getColour('odiintexpand','clm5','{{details.ASCORE_LINUX}}')">{{details.ASCORE_LINUX}}</div>
    <div class="clm6" ng-show="cp.getColour('odiintexpand','clm6','{{details.WEBCENTER}}')">{{details.WEBCENTER}}</div>
    <div class="clm7" ng-show="cp.getColour('odiintexpand','clm7','{{details.BI}}')">{{details.BI}}</div>
    <div class="clm8" ng-show="cp.getColour('odiintexpand','clm8','{{details.FMWTOOLS}}')">{{details.FMWTOOLS}}</div>
</div>

I am calling a function in ng-repeat loop. That function is setting "id" attribute of that particular class. here is function.

this.getColour = function(a, b, c) {
    var return_value = findColor(c);
    if (return_value.indexOf("1F0101") >= 0) {
        $("." + a + " ." + b).attr('id', 'v2');
    } else if (return_value.indexOf("013D02") >= 0) {
        $("." + a + " ." + b).attr('id', 'v3');
    } else if (return_value.indexOf("575701") >= 0) {
        $("." + a + " ." + b).attr('id', 'v4');
    } else {
        $("." + a + " ." + b).html("N/A");
        $("." + a + " ." + b).attr('id', 'v1');

    }
    return 1;
};

But result is not turning out correct. Its populating arbitrary id .

Logic in my code is:- According to html text (e.g {{details.SOA}}) , i am changing the id of that particular class. Dynamically its not happening.

Thanks for any help !

here is data sample `PRODUCT: [ { COMPONENT: "test1",

SOA: "140423.0745", FMWTOOLS: "140423.0745" }, { COMPONENT: "test2",

SOA: "12.2.1.0.0-150420.1742", FMWTOOLS: "12.2.1.0.0-150420.1742" }, { COMPONENT: "test3",

SOA: "12.2.1.0.0-150423.0100.0339", FMWTOOLS: "12.2.1.0.0-150423.0100.0339" }, { COMPONENT: "test4",

SOA: "20140509.1601", FMWTOOLS: "20140509.1601" }, { COMPONENT: "test5",

SOA: "12.1.4-150422.2254.0878", ODIINT: "12.1.4-150422.2254.0878", WEBCENTER: "12.1.4-150422.2254.0878", FMWTOOLS: "12.1.4-150421.2315.0875" }, { COMPONENT: "test6",

SOA: "12.2.1.0.0-150423.0357", ODIINT: "12.2.1.0.0-150423.0357", FMWTOOLS: "12.2.1.0.0-150422.0715" } ]`

here is css for id v1.

#v1 {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #99CCFF; //
grey-moz-radial-gradient background-image: -moz-radial-gradient(center, circle farthest-side, #EDF6FF 0%, #C2E0FF
    100%);
background-image: -webkit-radial-gradient(center, circle farthest-side, #EDF6FF 0%,
    #C2E0FF 100%);
/* box-shadow: 1px 1px 1px #888888; */
border: 1px solid #ffffff;

}

did you try calling `$apply()` after you have made the changes to DOM using JQuery? — Divya MV, Apr 24 '15 at 06:12
Can you post the sample data for odata_odi.PRODUCT and also the controller code? The best is with plunker or jsfiddle sample — hutingung, Apr 24 '15 at 06:15
Don't mix jQuery and angular together... specially in your controller.. what are you really trying to do — Arun P Johny, Apr 24 '15 at 06:22
@ArunPJohny i am getting json data from a url. Taking a key value e.g PRODUCT.SOA and calling a function. According to the value of that key changing id attribute of that particular class. So in js code adding different ids v1,v2,v3,v4 .so i have predefined its css. adding different id in different class to get different css. Adding css part in my post — sanjiv ranjan, Apr 24 '15 at 06:51
@DivyaMV may you help how to use $apply() here. I am new in angular. — sanjiv ranjan, Apr 24 '15 at 07:44
@DivyaMV I tried using $scope.$apply() after dom changes. but its going in infinite loop . here is code $("."+a+" ."+b).attr('id', 'v3'); $scope.$apply(); — sanjiv ranjan, Apr 24 '15 at 07:46
Please post your full set of code. missing findColor function. — hutingung, Apr 24 '15 at 08:04
Something wrong with this selector $("." + a + " ." + b). You are selecting all css class with .a .b to override the id. — hutingung, Apr 24 '15 at 08:24
Please refer to this plunker. http://plnkr.co/edit/Y0K2ktFqzZJVTPS5IuYy?p=preview . I am using 'angularjs' way to solve. If you want to use dom manipulation, you need to find the right selector(or unique selector) to update the value. — hutingung, Apr 24 '15 at 08:37
You can refer to this http://stackoverflow.com/questions/23655009/how-to-set-the-id-attribute-of-a-html-element-dynamically-with-angular-js — hutingung, Apr 24 '15 at 08:41
No problem. Can you please answer your own question since you got it work? :) — hutingung, Apr 24 '15 at 14:15

Issue with calling function in ng-repeat loop

0 Answers0