Angular create dynamic scope in controller(js) & bind in view(html)

Question

I have created this plnkr to show what I'v tried.

 $scope.myArray = [{
            "productDetails": {
                "productName": "productname1",
                "qty": 5,
                "pricePerPiece": 20
            },
            "vehiclecategory": "abcd"
        },
        ...
 ]

Need to bind the values of each vehicle category for each record. Have two records per row with Label & it's value that will be bind from key vehiclecategory for each object.

Label will remain as it is since its text will change depending upon internationalization, so it will be a constant that will be coming from properties file as per user location. There will be separate constants file for each location.

Currently have hard code the label value. Need to achieve below sample

(1)First Record : abcd1

(2)Second Record : abcd2

Have a look at this blog post to see how you can send different labels and make angular decide what to show on ui: http://blog.novanet.no/creating-multilingual-support-using-angularjs/ — Yaser, Feb 02 '17 at 21:24
@yaser. I have created internationalization json file for multilingual support my concern is to achieve the key value for the labels as specified in plnkr. But one thing that label text will be differ, for first instead of First Record it might be say My Data, for second Your Info etc & so on. — jinish shah, Feb 03 '17 at 02:35
@AlainIb. I need to bind the value for each label but the label text will be different not First Record, Second Record, It may be say My Data, Your Info etc & so on. — jinish shah, Feb 03 '17 at 02:37
have updated the plnkr. I had to create 6 different scope objects. Is it possible to create scope variable dynamically say $scope.label + "key" = my value for the key. — jinish shah, Feb 03 '17 at 06:13

score 1 · Accepted Answer · edited May 23 '17 at 11:45

1

@JohnD answer is correct, you can display the item inside an array using ngRepeat but if you want to add ordinal numbers you can have a look in this post "Add st, nd, rd and th (ordinal) suffix to a number"

edited May 23 '17 at 11:45

Community

1
1

answered Feb 03 '17 at 01:09

pryxen

381
2
22

@prxygen. Sorry. The label text will not be in same format, meaning not First Record, Second Record & so on. It will be different name which will be unique say for first it will My Data, second Test Info & so on. Since the label value won't be in same format i guess ng-repeat won't be an option. Let me know if still unclear – jinish shah Feb 03 '17 at 02:37
have updated the plnkr. I had to create 6 different scope objects. Is it possible to create scope variable dynamically say $scope.label + "key" = my value for the key. – jinish shah Feb 03 '17 at 06:14
did you try to add another key value pair in `myArray`? lets say `"vehiclecategory": "abcd" , "label":"My Data"` then call it using ngRepeat. Sorry if we can't answer your question directly because it is quite unclear – pryxen Feb 03 '17 at 06:32
oh yes you can create a dynamic `$scope` to achieve this inject `$parse` in your controller. just like this `var label = "dynamicLabel" + "key"; var model = $parse(label); model.assign($scope, false);` //output: $scope.dynamicLabelkey – pryxen Feb 03 '17 at 06:51
Thanks a lot it helped. – jinish shah Feb 04 '17 at 10:20
I'm glad it helped you. – pryxen Feb 06 '17 at 00:28

AlainIb · Answer 2 · 2017-02-03T07:53:37.637

case 1 )

http://plnkr.co/edit/sA85huMV3nYUJME8tSVx?p=preview

you know the name of label property in your data (the key)

    <div class="width50" ng-repeat="item in myArray track by $index">
       <label>{{item.label}} - {{$index}}</label> : {{item.vehiclecategory}}
    </div>

Javascript : I added a label attribute to your $scope.myArray. As JohnD explain, you have to use ng-repeat to iterate over an array and not use "$scope.first, $scope.second ..." (imagine if you have 100)

$scope.myArray = [{
    "productDetails": {            "productName": "productname1",            "qty": 5,            "pricePerPiece": 20        },
    "vehiclecategory": "abcd1",
    "label" : "My Data",
}, {
    "productDetails": {
        "productName": "productname1",            "qty": 5,            "pricePerPiece": 20        
    },
    "vehiclecategory": "abcd2",
    "label" : "Your Info",
}, {
    "productDetails": {            "productName": "productname1",            "qty": 5,            "pricePerPiece": 20        },
    "vehiclecategory": "abcd3",
    "label":"adresse"
}, {
    "productDetails": {            "productName": "productname1",            "qty": 5,            "pricePerPiece": 20        },
    "vehiclecategory": "abcd4",
    "label": "street"
}, {
    "productDetails": {            "productName": "productname1",            "qty": 5,           "pricePerPiece": 20        },
    "vehiclecategory": "abcd5",
    "label" : "city",

}, {
    "productDetails": {            "productName": "productname1",            "qty": 5,            "pricePerPiece": 20        },
    "vehiclecategory": "abcd6",
    "label":"etc"
}];

case 2 )

Maybe the name of the label attribute is not always the same like this :

    $scope.myArray = [
        {
             "productDetails": {    "productName": "productname1","qty": 5, "pricePerPiece": 20 },
             "vehiclecategory": "abcd1",
             "My Data" : "My Data",
        }, {
             "productDetails": {    "productName": "productname1", "qty": 5, "pricePerPiece": 20 },
             "vehiclecategory": "abcd2",
             "Your Info" : "Your Info",
        }, {
             "productDetails": { "productName": "productname1", "qty": 5, "pricePerPiece": 20 },
             "vehiclecategory": "abcd3",
             "label":"adresse"
        }, {
             "productDetails": { "productName": "productname1", "qty": 5, "pricePerPiece": 20   },
             "vehiclecategory": "abcd4",
             "street": "street"
        }, 
        ...
    ];
    // this array contain all the possible label name  
    var listoflabel = ["etc","adresse","city","street","Your Info","My Data"];
    // search on item if a label key exist and return its value
     $scope.getLabel = function(item){
          for(var l in listoflabel){
            if(item[ listoflabel[l] ]){
              return item[ listoflabel[l] ];
            }
          }
          return "label";
        }

HTML with function call

 <div class="width50" ng-repeat="item in myArrayVariable track by $index">
       <label>{{getLabel(item)}}</label> : {{item.vehiclecategory}}
    </div>

Yes. Will have to change the api accordingly. – jinish shah Feb 04 '17 at 10:22 — jinish shah, Feb 04 '17 at 10:22

score 0 · Answer 3 · answered Feb 03 '17 at 00:07

0

I'm not sure I completely understand your question, but if I do, you might be able to solve it with ngRepeat. Check out the following example:

<div class="width50" ng-repeat="item in myArray track by $index">
   <label>({{$index}}) {{item.vehiclecategory}}</label> : {{item.productDetails.productName}}
</div>

answered Feb 03 '17 at 00:07

John

1,240
9
13

Sorry. The label text will not be in same format, meaning not First Record, Second Record & so on. It will be different name which will be unique say for first it will My Data, second Test Info & so on. Since the label value won't be in same format i guess ng-repeat won't be an option. Let me know if still unclear – jinish shah Feb 03 '17 at 02:33
have updated the plnkr. I had to create 6 different scope objects. Is it possible to create scope variable dynamically say $scope.label + "key" = my value for the key. – jinish shah Feb 03 '17 at 06:14

Angular create dynamic scope in controller(js) & bind in view(html)

3 Answers3