How to show another scope value in view corresponding to other value?

Question

I am newbie to angular. I have two scope variables i.e,$scope.jsonData and $scope.dbdatas. I want to show value from $scope.jsonData corresponding to $scope.dbdatas.name. Please check my code. I have mentioned my desire output in the code.

View:

<div ng-app="myApp">
  <div ng-controller="TestCtrl">
    <div class="col-md-4 col-lg-4 col-xs-6" style="padding: 10px" ng-repeat="dbdata in dbdatas">
      <div>
       {{dbdata.name}} : <span class="list_text">{{dbdata.value}}</span>   
                            <!--something like {{dbdata.name}} : <span show-value class="list_text">{{dbdata.value}}</span>-->

       </div>
 </div>
</div>

 var app = angular.module('myApp', []);
app.controller('TestCtrl',function($scope){
$scope.jsonData=[{"_id":"56f90a9a51ec8f20e786a9e7","name":"Eleget","options":[{"key":"Y","value":"Once"},{"key":"M","value":"More than once"}]},{"_id":"56f90a9a51fs8f20e786a9e7","name":"MoliRet","options":[{"key":"L","value":"Let"},{"key":"R","value":"Ret"}]}];

$scope.dbdatas=[{name:'MoliRet',value:'L'},{name:'MoliRet',value:'R'},{name:'Eleget',value:'M'}];
});

/*app.directive('showValue',function(){
return{
    restrict:'A',
  link:function(scope,ele,attr){

  }
}
});*/

Current Output

MoliRet : L

MoliRet : R

Eleget : M

Desire Output

MoliRet: Let

MoliRet: Ret

Eleget: More than once

What you want is not clear. Please clarify what you actually want. — Khalid Hussain, Apr 04 '16 at 11:15
http://jsfiddle.net/td8rm6dy/10/ is working, not clear your questions — Amila Sampath, Apr 04 '16 at 11:49

score 1 · Answer 1 · edited Apr 05 '16 at 06:57

You can use angular.ForEach to match data from both scope variables and push the data to an array $scope. Please take a look at the solution below.

<div ng-app="myApp">
    <div ng-controller="TestCtrl">
        <div class="col-md-4 col-lg-4 col-xs-6" style="padding: 10px" ng-repeat="dbdata in dbdatas">
            <div>
               {{dbdata.name}} : <span class="list_text">{{dbdata.value}}</span>   
           </div>
       </div>
      <div ng-repeat="expect1 in expectations">{{expect1.name}}: {{expect1.value}}</div>
   </div>
</div>

$scope.dbdatas=[{name:'MoliRet',value:'L'},{name:'MoliRet',value:'R'},{name:'Eleget',value:'M'}];
   $scope.expectations= [];
   angular.forEach($scope.dbdatas,function(value1){
     angular.forEach($scope.jsonData,function(value2){
     if(value1.name == value2.name){
       angular.forEach(value2.options,function(value3){
         if(value3.key == value1.value){
           $scope.expectations.push({
           "name" : value2.name,
           "value": value3.value});
          }
       });
     }
   });
});

Expected output will be

MoliRet: Let

MoliRet: Ret

Eleget: More than once

can we use here `directive` to achieve this desire output. `something like {{dbdata.name}} : ` — vineet, Apr 05 '16 at 05:20

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

Working Fiddle

HTML:

<div ng-app="myApp">
     <div ng-controller="TestCtrl">
           <div class="col-md-4 col-lg-4 col-xs-6" style="padding: 10px" ng-repeat="item in jsonData">
             <div ng-repeat='option in item.options'>
                <div ng-show="isInArray(option.key)">
                    {{item.name}}: {{option.value}}  
                </div>
             </div>
           </div>
      </div> 
</div>

JavaScript:

var app = angular.module('myApp', []);
app.controller('TestCtrl',function($scope){

$scope.isInArray = function(key){
  var returnValue = false;    
  for(var i=0;i<$scope.dbdatas.length;i++){
    if($scope.dbdatas[i].value==key){
      returnValue = true;      
      break;
    }
    
  }
  
  return returnValue
 
}

$scope.jsonData=[{"_id":"56f90a9a51ec8f20e786a9e7","name":"Eleget","options":[{"key":"Y","value":"Once"},{"key":"M","value":"More than once"}]},{"_id":"56f90a9a51fs8f20e786a9e7","name":"MoliRet","options":[{"key":"L","value":"Let"},{"key":"R","value":"Ret"}]}];

$scope.dbdatas=[{name:'MoliRet',value:'L'},{name:'MoliRet',value:'R'},{name:'Eleget',value:'M'}];
});

Output:

Eleget: More than once

MoliRet: Let

MoliRet: Ret

Hope that solve your problem.

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 04 '16 at 16:38

Khalid Hussain

1,675
17
25

can we use here `directive` to achieve this desire output. `something like {{dbdata.name}} : ` – vineet Apr 05 '16 at 05:20
Please explain what do you actually want. You have expected data on your hand. Why do you want to use directive? – Khalid Hussain Apr 05 '16 at 05:35
Because i need to use this logic in many controllers. That's why i want to use directive. Otherwise i have to define `isInArray` function in all controllers, i think that is not good approach. – vineet Apr 05 '16 at 06:19
You just want to replace only `isInArray` with a directive right? – Khalid Hussain Apr 05 '16 at 06:20
You basically have two options, either define it as a service, or place it on your root scope. [Have a look at this answer](http://stackoverflow.com/a/15026440/3186722) – Khalid Hussain Apr 05 '16 at 09:07

score 1 · Answer 3 · answered Apr 05 '16 at 13:39

I would suggest you have to store a unique options table in one json and use angular custom service filter to handle the relative key 'look at the plunker'. you can use this custom filter in any controller and view.

Here is custom filter

app.filter('myFilter', ['$filter', function ($filter) {
  return function (data, param) {
    var output = $filter('filter')(data, {key:param},true);
    return (param && output.length) ? output[0].value : '';
  };
}]);

Here is a working plunker .Hope that help.

How to show another scope value in view corresponding to other value?

3 Answers3