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: blog.novanet.no/creating-multilingual-support-using-angularjs — Yaser
– Yaser, Commented Feb 2, 2017 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
– jinish shah, Commented Feb 3, 2017 at 2: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
– jinish shah, Commented Feb 3, 2017 at 2: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
– jinish shah, Commented Feb 3, 2017 at 6:13

Community · Accepted Answer · 2017-05-23 11:45:22Z

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, 2017 at 11:45

CommunityBot

11 silver badge

answered Feb 3, 2017 at 1:09

pryxen

4331 gold badge4 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

jinish shah Over a year ago

@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 Over a year ago

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.

pryxen Over a year ago

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 Over a year ago

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

jinish shah Over a year ago

Thanks a lot it helped.

|

AlainIb · Accepted Answer · 2017-02-03 07:53:37Z

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>

John · Accepted Answer · 2017-02-03 00:07:57Z

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 3, 2017 at 0:07

John

1,2949 silver badges13 bronze badges

2 Comments

jinish shah Over a year ago

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 Over a year ago

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.

Collectives™ on Stack Overflow

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

3 Answers 3

6 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related