Angularjs Wählen Sie Optionen Ausgabe

Ich bin neu bei angularjs. was ich versuche, ist dies, wenn ich eine Optionen aus selectbox1 und selectbox2 Wert ändert entsprechend dem Wert von selectbox1.Angularjs Wählen Sie Optionen Ausgabe

Für Beispiel: Wenn der Benutzer-Frontend von selectbox1 und selectbox2 wählen müssen Werte 'css, jquery, html, angularjs' sind angezeigt, aber hier, wenn ich alle Optionen aus selectbox1 wählen. es zeigt 'php, ruby, c#, python', irgendeine Idee, was ich falsch mache. Bitte hilf mir.

angular.module("ctrl", []) 
 
    .controller("appsctrl", function ($scope) { 
 
     $scope.data = { 
 
     frontend: [{ id: 1, name: 'css' }, { id: 2, name: 'jquery' }, { id: 3, name: 'html' }, { id: 4, name: 'angularjs' }], 
 
     Server: [{ id: 1, name: 'php' }, { id: 2, name: 'ruby' }, { id: 3, name: 'c#' }, { id: 4, name: 'python' }] 
 
     }; 
 

 
     $scope.selectvalues = function() { 
 
     angular.forEach($scope.data, function (value, key) { 
 
      $scope.values = value; 
 
     }); 
 
     } 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="ctrl" ng-controller="appsctrl"> 
 
    <div class="selectvalues"> 
 
    <select class="form" ng-model="select" ng-change=selectvalues()> 
 
      <option value="">Select</option> 
 
      <option value="FrontEnd">FrontEnd</option> 
 
      <option value="Server">Server</option> 
 
     </select> 
 
    <select class="form" ng-model="select_list"> 
 
      <option value="">Select</option> 
 
      <option ng-repeat ="value in values" value ="{{value.name}}">{{value.name}}</option> 
 
     </select> 
 
    </div> 
 
</div>

Quelle

2017-04-14 vijay

Nun, man denke nur an, was Ihr Code tut: wenn selectvalues () aufgerufen wird, verwenden Sie es nicht, was die in der ersten Auswahlfeld ausgewählte Benutzer, die in $ Umfang gespeichert .wählen. Stattdessen durchläuft es nur alle Werte von $ scope.data und speichert die letzte in $ scope.values. –

Es sollte so sein. Sie haben einige Probleme.

Der Optionswert für das erste Auswahl-Tag war falsch.

  <option value="frontend">FrontEnd</option> 
      <option value="Server">Server</option>

angular.module("ctrl", []) 
 
    .controller("appsctrl", function($scope) { 
 
    $scope.data = { 
 
     "frontend": [{ 
 
     id: 1, 
 
     name: 'css' 
 
     }, { 
 
     id: 2, 
 
     name: 'jquery' 
 
     }, { 
 
     id: 3, 
 
     name: 'html' 
 
     }, { 
 
     id: 4, 
 
     name: 'angularjs' 
 
     }], 
 
     "Server": [{ 
 
     id: 1, 
 
     name: 'php' 
 
     }, { 
 
     id: 2, 
 
     name: 'ruby' 
 
     }, { 
 
     id: 3, 
 
     name: 'c#' 
 
     }, { 
 
     id: 4, 
 
     name: 'python' 
 
     }] 
 
    }; 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="ctrl" ng-controller="appsctrl"> 
 
    <div class="selectvalues"> 
 
    <select class="form" ng-model="select"> 
 
      <option value="">Select</option> 
 
      <option value="frontend">FrontEnd</option> 
 
      <option value="Server">Server</option> 
 
     </select> 
 
    <select class="form" ng-model="select_list" ng-options="value.id as value.name for value in data[select]"> 
 
     <option value="" style="display:none">Select</option> 
 
     </select> 
 
    </div> 
 
</div>

Quelle

2017-04-14 06:20:44

hi, danke für deine antwort mate, aber warum der leere wert oben angehängt ist – vijay

Es ist besser, 'ng-optionen' anstelle von' ng-repeat' zu verwenden. Siehe aktualisierte antwort. –

bereits. Ändern Sie den Wert der ausgewählten Option von FrontEnd in frontend. und jetzt beim Ändern der Auswahloption wird die ng-model für Ihre Auswahl frontend oder Server und auf der Steuerung $scope.values = $scope.data[$scope.select] in Ihrem Change Event sein. Das wird dein Problem lösen.

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 

 
<body> 
 
    <div ng-app="ctrl" ng-controller="appsctrl"> 
 
     <div class="selectvalues"> 
 
     <select class="form" ng-model="select" ng-change=selectvalues()> 
 
       <option value="">Select</option> 
 
       <option value="frontend">FrontEnd</option> 
 
       <option value="Server">Server</option> 
 
      </select> 
 
     <select class="form" ng-model="select_list"> 
 
       <option value="">Select</option> 
 
       <option ng-repeat ="value in values" value ="{{value.name}}">{{value.name}}</option> 
 
      </select> 
 
     </div> 
 
    </div> 
 

 
    <script type="text/javascript"> 
 
     angular.module("ctrl", []) 
 
     .controller("appsctrl", function ($scope) { 
 
      $scope.data = { 
 
      frontend: [{ id: 1, name: 'css' }, { id: 2, name: 'jquery' }, { id: 3, name: 'html' }, { id: 4, name: 'angularjs' }], 
 
      Server: [{ id: 1, name: 'php' }, { id: 2, name: 'ruby' }, { id: 3, name: 'c#' }, { id: 4, name: 'python' }] 
 
      }; 
 

 
      $scope.selectvalues = function() { 
 
       $scope.values = $scope.data[$scope.select]; 
 
      } 
 

 
     }); 
 
    </script> 
 
</body> 
 

 
</html>

Quelle

2017-04-14 06:20:51 Nitheesh

danke für deine antwort .. – vijay

Angularjs Wählen Sie Optionen Ausgabe

Antwort

Verwandte Themen