比较来自两个范围的对象以提供值

时间:2016-10-28 10:27:04

标签: angularjs angularjs-scope angularjs-ng-repeat angularjs-ng-click

我会尽可能地简化问题。

假设我有2个范围

$scope.section1 = [
  {label: 'label1'},
  {label: 'label2'}
];

$scope.section2 = [
  {value: 'one'},
  {value: 'two}
];

这些范围用于生成带有ng-repeat

的按钮
<button ng-repeat="item in section1 type="button">{{item.label}}</button>

<button ng-repeat="item in section2 type="button">{{item.value}}</button>

现在我想要创建第三个范围,将值附加到前两个对象的组合中,例如:

$scope.combo = [
  { section1.label:label1 + section2.value: one = 'result1' },
  { section1.label:label2 + section2.value: one = 'result2' },
  { section1.label:label1 + section2.value: two = 'result3' },
  { section1.label:label2 + section2.value: two = 'result4' }
];

现在有了棘手的部分。我需要做的是添加一个函数,该函数将从每个部分中获取单击的ng-repeat按钮的值,然后根据输入字段中的第三个作用域显示结果。

因此,如果单击带有label:label1的按钮和带有值的按钮:两个输入字段将显示result3。

当谈到Angular时,我非常环保,我不知道如何处理它,尤其是所有值都是字符串。

2 个答案:

答案 0 :(得分:1)

如果我理解正确,你可以将你的组合设置为......

class DownloadController implements RxController {

   def stream() {

        FileDB.get((Serializable) params.id).subscribe({ fileDB fileDB->
            //How do I handle this??
            response.setContentType(fileDB.contentType)
            response.setHeader("Content-disposition", "filename=${fileDB.id}.wav")
            response.outputStream << fileDB.file.getData()
        })

   }

}

然后,您可以将正确的值引用为组合[valueFromButton1] [valueFromButton2],其中valueFromButton1和valueFromButton2指向包含单击按钮结果的模型。然后,您的控制器功能只需在单击按钮时更新模型即可将所有内容绑定在一起。

请参阅此plunkr ... https://embed.plnkr.co/GgorcM/

答案 1 :(得分:1)

如果没有太大变化,您也可以尝试下面提供的代码片段。运行它来检查演示。

&#13;
&#13;
var app = angular.module('app', []);
app.controller('Ctrl',['$scope' ,function($scope) {
    var key1, key2;
    $scope.click = function(type, item) {

        if (type == 'label') {
            key1 = item;
        } else if (type == 'val') {
            key2 = item;
        }

        $scope.key = key1 + '+' + key2;
        angular.forEach($scope.combo, function(val, key) {
          if(val[$scope.key]){
                $scope.finalVal = val[$scope.key];
          }
        });
    };

    $scope.section1 = [{
        label: 'label1'
    }, {
        label: 'label2'
    }];

    $scope.section2 = [{
        value: 'one'
    }, {
        value: 'two'
    }];

    $scope.combo = [{
        'label1+one': 'result1'
    }, {
        'label2+one': 'result2'
    }, {
        'label1+two': 'result3'
    }, {
        'label2+two': 'result4'
    }];

}]);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller='Ctrl'>

<button ng-repeat="item in section1" ng-click="click('label',item.label)" type="button">{{item.label}}</button>


<button ng-repeat="item in section2" ng-click="click('val',item.value)"type="button">{{item.value}}</button>
  
  <input type="text" ng-model="finalVal"/>{{key}} {{finalVal}}
  </div>
&#13;
&#13;
&#13;