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

Question

我会尽量简化问题。

假设我有 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 的按钮和带有 value:two 的按钮，输入字段将显示结果 3。

我对 Angular 很陌生，我不知道如何处理它，尤其是所有值都是字符串。

Answer 1

如果我理解正确的话，你可以设置你的组合，比如...

$scope.combo = {
    "label1": {
        "one": "result1",
        "two": "result2"
    },
    "label2": {
        "one": "result3",
        "two": "result4"
    }
}

然后您可以将正确的值引用为 combo[valueFromButton1][valueFromButton2]，其中 valueFromButton1 和 valueFromButton2 指向包含单击按钮结果的模型。然后，您的控制器功能只需要在单击按钮时通过更新模型将所有内容联系在一起。

看到这个 plunkr ... https://embed.plnkr.co/GgorcM/

Answer 2

在不做太多改变的情况下，您也可以像下面提供的代码一样尝试snippet.Run它来检查演示。

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

}]);

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

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

Comparing objects from two scopes to provide a value

angularjs

angularjs-scope

angularjs-ng-repeat

angularjs-ng-click