Показать разные результаты в зависимости от значений, выбранных пользователем

Question

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

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

Если пользователь выбрал Name1, name1 и name1 из выпадающих затем показать результат сНа класса шоу-это-1

И если значения Name2, Name2 и Name2 затем показать результаты класса сНа шоу- это-2

Как это реализовать?

HTML:

<div ng-controller="Main" ng-app> 
    <div>selections = {{selections}}</div> 

    <div> 
     <p>Select values</p> 

     <select ng-model="selections[0]" ng-options="i.id as i.name for i in items"> 
      <option value=""></option> 
     </select> 

     <select ng-model="selections[1]" ng-options="i.id as i.name for i in items"> 
      <option value=""></option> 
     </select> 

     <select ng-model="selections[2]" ng-options="i.id as i.name for i in items"> 
      <option value=""></option> 
     </select> 
    </div> 

    <div class="show-this-1">3x Name1 chosen</div> 
    <div class="show-this-2">3x Name2 chosen</div> 
    <div class="show-this-3">3x Name3 chosen</div> 

</div> 

JS:

function Main($scope) { 

$scope.selections = ["", "", ""]; 

$scope.sample = function() { 
    $scope.selections = [ "id-1", "id-2", "id-3" ]; 
} 

$scope.items = [{ 
    id: 'id-1', 
    name: 'Name 1'}, 
{ 
    id: 'id-2', 
    name: 'Name 2'}, 
{ 
    id: 'id-3', 
    name: 'Name 3'}]; 
} 

jsfiddle Preview

Answer 1

Если вы хотите, чтобы показать только один из трех дивы в зависимости, был ли пользователь выбрал тот же вариант во всех трех выпадающих меню, тогда ответ будет следующим:

<div ng-controller="Main" ng-app> 
    <div>selections = {{selections}}</div> 

    <div> 
     <p>Select values</p> 

     <select ng-model="selections[0]" ng-options="i.id as i.name for i in items"> 
      <option value=""></option> 
     </select> 

     <select ng-model="selections[1]" ng-options="i.id as i.name for i in items"> 
      <option value=""></option> 
     </select> 

     <select ng-model="selections[2]" ng-options="i.id as i.name for i in items"> 
      <option value=""></option> 
     </select> 
    </div> 

    <div> 
     <div class="show-this-1" ng-show="selections[0] == items[0].id && selections[1] == items[0].id && selections[2] == items[0].id">3x Name1 chosen</div> 
     <div class="show-this-2" ng-show="selections[0] == items[1].id && selections[1] == items[1].id && selections[2] == items[1].id">3x Name2 chosen</div> 
     <div class="show-this-3" ng-show="selections[0] == items[2].id && selections[1] == items[2].id && selections[2] == items[2].id">3x Name3 chosen</div> 
    </div> 

</div> 

jsfiddle