Problem with angle selection

Question

Problem with angle selection

Navigation

#1 by (0 votes)

0

In the HTML that I'm moving, I created a select where the selected option is pulled from a script in Angular. It uses data.singleSelect to pull the data and put the selected value as the selected option, when I try to put that selected option in another variable it does not find any result. The objective 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><scriptsrc="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

asked by anonymous 08.08.2017 / 16:07

1 answer

Adding more than one slider image Different layout in last row of datagrid

score 0 · Accepted Answer

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