How to assign key from one variable to value in another, angular

Question

I'm rendering form on a page with help ng-repeat, data for this form comes dynamically from request. In this data I have nested array - categories. Inside of this array defined ids and list of this ids I can see in my form. From another request I get another array where defined names for ids. How can I assign key value from one variable to key value from another variable that display on the page list of names instead of list of ids

This is plunker with my problem. I appreciate any help, thanks in advance.

html of my form

 <form style="padding: 15px" ng-submit="submitForm(rowData)">
            <div class="form-group row">
            <div ng-repeat="(key, value) in rowData">
            <div  ng-if="key | id">
                <label class="col-sm-6">{{key | makeUppercase}}</label>
                <div class=" col-sm-6">
                <input class="form-control rowValue"
                       id="rowData[key]"
                       ng-if="!isObject(value)"
                       type="text"
                       ng-model="rowData[key]"
                                                    />
               <span
                     class="form-control rowValue"
                     id="categories"
                     ng-if="isObject(value) && key == 'categories'"
                     ng-model="rowData.categories">   
                        {{rowData.categories}}
                </span>
               </div>
              </div>
             </div>
            </div>
                 <div class="pull-right">
       <button type="submit" class="btn btn-default" 
               ng-if="rowData">Save</button>
       <button type="button" class="btn btn-default" ng-if="rowData"
               ng-click="cancelForm()">Cancel</button>
             </div>
         </form>

Why do you don't try something like ui-select plugin : github.com/angular-ui/ui-select — Gerald Chablowski
– Gerald Chablowski, Commented Aug 18, 2016 at 21:33
@AbdelrhmanMohamed I want to diaplay instead [3,5,7] value from other variable like [Category 5,Category 1,Category 6] — antonyboom
– antonyboom, Commented Aug 18, 2016 at 21:37
@GeraldChablowski I'm not trying to show all values, I just want to display names like [Category 5,Category 1,Category 6] instead of [3,5,7] — antonyboom
– antonyboom, Commented Aug 18, 2016 at 21:39
I understand but for doing that you will be oblige to wait for you other data to be recuperate and make an ng-repeat with it and it exist some all in one solution like ui-select. — Gerald Chablowski
– Gerald Chablowski, Commented Aug 18, 2016 at 21:46

Abdelrahman M. Allam · Accepted Answer · 2016-08-18 21:58:32Z

2

My implementation is very naive but it displays what you want. I add this function to your controller

  $scope.getCategoryIns = function(ids){
    var categoriesName = [];
    for (var j = 0; j < ids.length; j ++){
    id = ids[j];
   for(var i= 0; i < $scope.categories.length;i++)
   {
      if ( $scope.categories[i].id == id){
        categoriesName.push($scope.categories[i].name);
      }
   }
 }

  var str = categoriesName.join(', ');
  return str;
}

and in HTML use this function as following

<span class="form-control rowValue"  id="categories" ng-if="isObject(value) && key == 'categories'" ng-model="rowData.categories">
                       {{getCategoryIns(rowData.categories)}}</span>

plnkr here

answered Aug 18, 2016 at 21:58

Abdelrahman M. Allam

92210 silver badges18 bronze badges

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

1 Comment

antonyboom Over a year ago

Thank you so much! This is exactly what I was looking for!

Laurel · Accepted Answer · 2016-08-18 22:23:18Z

1

You could create a new method in your controller that maps the numbers in $scope.rowData.categories to $scope.categories.id and returns values of the corresponding category names:

$scope.getCategoryName = function (categoriesArr) {
    return categoriesArr.map(function(curr) {
        return $scope.categories.filter(function(el){
            return el.id === curr; //filter out the appropriate category by id
        })[0].name; //select the item and grab its name property
    })
}

and update your HTML to use the new method:

<span>
    class="form-control rowValue"
    id="categories"
    ng-if="isObject(value) && key == 'categories'"
    ng-model="rowData.categories">
     {{getCategoryName(rowData.categories)}}
</span>

edited Aug 18, 2016 at 22:23

Laurel

6,23114 gold badges35 silver badges60 bronze badges

answered Aug 18, 2016 at 22:01

jisoo shin

5406 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to assign key from one variable to value in another, angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related