0

Я постараюсь упростить проблему настолько, насколько смогу.Сравнение объектов из двух областей для получения значения

Скажем, у меня есть 2 областей

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

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

Эти прицелы используются для создания кнопок с нг-повтора

<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 из каждого раздела, а затем отображать результаты на основе третьей области в поле ввода или что-то в этом роде.

Итак, если вы нажмете кнопку с меткой: label1 и цифрой со значением: два поля ввода будут показывать результат3.

Я очень зелёный, когда дело доходит до Angular, и я понятия не имею, как подойти к нему, особенно, что все значения являются строками.

+0

Кстати, будьте осторожны с вашей терминологией. У вас есть только одна область, а section1, section2 и combo - это просто массивы/объекты, созданные в этой единственной области. – haggisandchips

ответ

1

Если я правильно понимаю, что вы могли бы настроить ваш комбо-то вроде ...

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

Вы можете ссылаться на правильное значение как комбо [valueFromButton1] [valueFromButton2] где valueFromButton1 и valueFromButton2 точки на модели, которая содержит результат нажатых кнопок. Функция контроллера тогда просто должна связать все вместе, обновив модель при нажатии кнопок.

Смотреть это plunkr ... https://embed.plnkr.co/GgorcM/

+0

Работает как очарование. И это так просто :) Блестяще, спасибо. –

+0

Из любопытства. Можно ли получить результаты от 3 или более предметов? –

+0

Да, вам просто нужно вложить результаты на другой уровень, преобразуя значения «один» и «два», вложенные в комбо, как объект, представляющий третий набор значений. Этот подход не будет масштабироваться очень легко, и вы можете дойти до того, что подход Angular_10 будет легче поддерживать из-за его более линейного подхода. Если вы придерживаетесь моего подхода, вам просто нужно добавить дополнительный [] accessor, чтобы выбрать результат для третьего уровня. HTH – haggisandchips

1

Без изменения много вы можете попробовать, как показано ниже при условии кода 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>

Смежные вопросы