Question

我是棱角分明的新手。我有两个范围变量，即$scope.jsonData和$scope.dbdatas。我想显示与$scope.jsonData对应的$scope.dbdatas.name的值。请检查我的code。我在代码中提到了我的欲望输出。

查看：

<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){

  }
}
});*/

当前输出

MoliRet：L

MoliRet：R

Eleget：M

欲望输出

MoliRet：让

MoliRet：Ret

Eleget：不止一次

Answer 1

您可以使用angular.ForEach来匹配两个范围变量中的数据，并将数据推送到数组$ scope。请看下面的解决方案。

<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});
          }
       });
     }
   });
});

预期输出

MoliRet：让

MoliRet：Ret

Eleget：不止一次

Answer 2

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.

Answer 3

我建议您必须在一个json中存储一个唯一的选项表，并使用角度自定义服务过滤器来处理相关键＆＃39;看看plunker＆＃39;。您可以在任何控制器和视图中使用此自定义筛选器。

这是自定义过滤器

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 : '';
  };
}]);

这是一个有效的plunker 希望有所帮助。

如何在视图中显示与其他值对应的另一个范围值？

3 个答案: