Problem with angular selection

Asked

Viewed 74 times

0

In the HTML I’m playing, I created a select where the selected option is pulled from a script in Angular. It uses the data.singleSelect to pull the dice and put the selected value as the selected option, when I try to put this selected option in another variable it does not find any result. The goal is with this selected option to be able to show a specific div via the Angular.

(function(angular) {
  var app = angular.module('staticSelect', []);
  app.controller('ExampleController', ['$scope', function($scope) {

    $scope.data = {
      default: '0',
      option1: 'Div1',
      option2: 'Div2',
      option3: 'Div3',
      option4: 'Div4',
      option5: 'Div5',
    };

    $scope.opcao = $scope.data.singleSelect;

  }]);
})(window.angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="app.js"></script>

<body ng-app="staticSelect">
  <div ng-controller="ExampleController">
    <form name="myForm">

      <label for="singleSelect"> Escolha um valor </label><br>
      <select name="singleSelect" id="singleSelect" ng-model="data.singleSelect">
    			  <option value="{{data.default}}">---> SELECIONE <---</option> <!-- not selected / blank option -->
    			  <option value="{{data.option1}}">Opção 1</option> <!-- interpolation -->
    			  <option value="{{data.option2}}">Opção 2</option>
    			  <option value="{{data.option3}}">Opção 3</option>
    			  <option value="{{data.option4}}">Opção 4</option>
    			  <option value="{{data.option5}}">Opção 5</option>
    			</select><br>
      <tt>Opção selecionada = {{data.singleSelect}}</tt>
      <p>TESTE DE OPCAO >>>> {{opcao}}</p>
      <br>

      <div id="minhaDiv">
        <button type="button" ng-click="Div1 = !Div1">Mostrar / Esconder</button>
        <div id="Div1" ng-init="Div1 = false" ng-show="Div1" style="background:#4169E1;color:#FFF">Opção 1</div>
        <div id="Div2" ng-init="Div2 = false" ng-show="Div2" style="background:#191970;color:#FFF">Opção 2</div>
        <div id="Div3" ng-init="Div3 = false" ng-show="Div3" style="background:#00FFFF;color:#FFF">Opção 3</div>
        <div id="Div4" ng-init="Div4 = false" ng-show="Div4" style="background:#00CED1;color:#FFF">Opção 4</div>
        <div id="Div5" ng-init="Div5 = false" ng-show="Div5" style="background:#FF4500;color:#FFF">Opção 5</div>
      </div>
    </form>
  </div>
</body>

javascript html angularjs

  • If you want to select Option 1 and show Div 1? the others consequently no.? That’s it?

  • 1

    that’s right, I need from the selection show the corresponding div

  • I did the example on top of yours added a function and it worked, have better ways of doing that, but, I always adapt the question and the original code, see if it stayed of your agreement!?

1 answer

0


(function(angular) {
  var app = angular.module('staticSelect', []);
  app.controller('ExampleController', ['$scope', function($scope) {

    $scope.data = {
      default: '0',
      option1: 'Div1',
      option2: 'Div2',
      option3: 'Div3',
      option4: 'Div4',
      option5: 'Div5',
    };

    $scope.opcao = $scope.data.singleSelect;
    
    $scope.showDiv = function(div){    
      return $scope.data.singleSelect == div;
    }
  }]);
})(window.angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="staticSelect">
  <div ng-controller="ExampleController">
    <form name="myForm">

      <label for="singleSelect"> Escolha um valor </label><br>
      <select name="singleSelect" id="singleSelect" ng-model="data.singleSelect">
    			  <option value="{{data.default}}">---> SELECIONE <---</option> <!-- not selected / blank option -->
    			  <option value="{{data.option1}}">Opção 1</option> <!-- interpolation -->
    			  <option value="{{data.option2}}">Opção 2</option>
    			  <option value="{{data.option3}}">Opção 3</option>
    			  <option value="{{data.option4}}">Opção 4</option>
    			  <option value="{{data.option5}}">Opção 5</option>
    			</select><br>
      <tt>Opção selecionada = {{data.singleSelect}}</tt>
      <p>TESTE DE OPCAO >>>> {{opcao}}</p>
      <br>

      <div id="minhaDiv">
        <button type="button" ng-click="Div1 = !Div1">Mostrar / Esconder</button>
        
        <div id="Div1" ng-init="Div1 = opcao" ng-show="showDiv('Div1')" style="background:#4169E1;color:#FFF">Opção 1</div>
        <div id="Div2" ng-init="Div2 = opcao" ng-show="showDiv('Div2')" style="background:#191970;color:#FFF">Opção 2</div>
        <div id="Div3" ng-init="Div3 = opcao" ng-show="showDiv('Div3')" style="background:#00FFFF;color:#FFF">Opção 3</div>
        <div id="Div4" ng-init="Div4 = opcao" ng-show="showDiv('Div4')" style="background:#00CED1;color:#FFF">Opção 4</div>
        <div id="Div5" ng-init="Div5 = opcao" ng-show="showDiv('Div5')" style="background:#FF4500;color:#FFF">Opção 5</div>
      </div>
    </form>
  </div>
</div>

Browser other questions tagged javascript html angularjs

You are not signed in. Login or sign up in order to post.