Einstellung einer Auswahl mit Optionen in AngularJS

Es tut mir leid für die Störung, ich habe ein Problem mit Angular.Einstellung einer Auswahl mit Optionen in AngularJS

Ganz neu im Rahmen, ich versuche, eine Formel mit einer Auswahl von Optionen zu setzen. Aber aus irgendeinem Grund, in der HTML-Seite, habe ich eine Liste von Ländern, aber es ist leer.

Kann jemand bitte einen Hinweis geben, wie man es durchmacht?

Vielen Dank im Voraus

<html> 

<head> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="assets/css/style.css"> 

    <!-- jQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <!-- Latest compiled JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <!-- Latest Angular --> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 

</head>

<body> 

<form class="form-horizontal"> 
<fieldset> 

<!-- Form Name --> 
<legend>NIF</legend> 

<!-- Text input--> 
<div class="form-group"> 
    <md-input-container> 
    <label class="col-md-4 control-label" for="textinput">NIF</label> 
    <div class="col-md-4"> 
     <input id="textinput" name="textinput" type="text" 
      placeholder="Entrer le NIF" class="form-control input-md" 
      required="" ng-model="data.nif"> 
    </div> 
    </md-input-container> 
</div>

<!-- Select Basic --> 
<div class="form-group"> 
    <label class="col-md-4 control-label">Pays</label> 
    <div class="col-md-4" ng-controller="countryController"> 
    <select ng-model="selectedCountry" class="form-control" 
      ng-options="location as location.name for location in locations"> 
     <!--<option ng-value="country" ng-repeat="country in countries"></option>--> 
    </select> 
    </div> 
</div> 

<!-- Select Basic --> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="Entité">Entité</label> 
    <div class="col-md-4"> 
    <select id="Entité" name="Entité" class="form-control" 
      ng-model="data.entity"> 
     <option value="Personne physique">Personne physique</option> 
     <option value="Personne morale">Personne morale</option> 
    </select> 
    </div> 
</div>

<!-- Button --> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for=""></label> 
    <div class="col-md-4"> 
    <button id="" name="" class="btn btn-primary center-btn">Lancer la recherche</button> 
    </div> 
</div> 


</fieldset> 
</form> 

</body> 


</html>

angular.controller('countryController', function($scope) { 
    $scope.locations = [ 
    { name: 'A' }, 
    { name: 'B' }, 
    { name: 'C' } 
    ]; 
    $scope.selectedCountry = { name: 'A' }; 
});

Quelle

2017-06-16 Mohamed Sarre

korrigieren defaul t ausgewählte Referenz.

So $scope.selectedCountry = { name: 'A' }; zu $scope.selectedCountry = $scope.locations[0];

Arbeits Demo ändern:

var myapp = angular.module('myapp', []); 
 
myapp.controller('FirstCtrl', function($scope) { 
 
    $scope.locations = [{ 
 
     name: 'A' 
 
    }, 
 
    { 
 
     name: 'B' 
 
    }, 
 
    { 
 
     name: 'C' 
 
    } 
 
    ]; 
 
    $scope.selectedCountry = $scope.locations[0]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myapp"> 
 
    <fieldset ng-controller="FirstCtrl"> 
 
    <select ng-options="location as location.name for location in locations" ng-model="selectedCountry"></select> {{ selectedCountry }} 
 
    </fieldset> 
 
</div>

Quelle

2017-06-16 14:37:40 anoop

@anoop, irgendwelche Gedanken, bitte? Es ist ein Formular mit 2 Feldern. Der erste über die Länder funktioniert, aber nicht der zweite.

Nur eine weitere kleine Frage, wenn Sie mir erlauben, bitte. Ich mache jetzt das gleiche für ein anderes Feld auf der gleichen Seite. Aber ich habe die gleichen Schritte wie das erste Feld gemacht, möchte aber nicht mit dem zweiten Controller interagieren, den ich eingestellt habe.

var myotherapp = angular.module('whoisApp', []); 
myotherapp.controller('IdentifierController', function($scope) { 
    $scope.identifiers = [ 
    { name: 'Personne physique'}, 
    { name: 'Personne morale'}, 
    ]; 
    $scope.selectedEntity = $scope.identifiers[0]; 
}); 



<div class="form-group"> 
    <label class="col-md-4 control-label">Entité</label> 
    <div class="col-md-4" ng-app="whoisApp"> 
    <fieldset ng-controller="IdentifierController"> 
    <select ng-model="selectedEntity" class="form-control" ng-options="identifier as identifier.name for identifier in identifiers"> 
    </select> 
    </fieldset> 
    </div> 
</div>

Könnten Sie mir bitte einen Hinweis geben, warum es funktioniert, bitte? Ich habe Fragen über die Verwendung von zwei Controllern auf der gleichen Seite und wenn ich falsch liege, scheint der Code korrekt.

Quelle

2017-06-19 07:43:23

Ich habe gerade herausgefunden, dass ich mehrere Module erstellen kann, aber nicht mehr als eine ng-App auf derselben Seite platzieren kann. Es funktioniert jetzt perfekt.

Quelle

2017-06-19 09:42:23

Einstellung einer Auswahl mit Optionen in AngularJS

Antwort

Verwandte Themen