在AngularJS中設置選項選項

我很抱歉令人不安，我遇到了與Angular有關的問題。在AngularJS中設置選項選項

相當新的框架，我試圖設置與選擇具有選項的處方。但由於某種原因，在html頁面中，我有一個國家列表，但它是空的。

任何人都可以提示如何通過它嗎？

在此先感謝

<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' }; 
});

來源

2017-06-16 Mohamed Sarre

正確的defaul t選定的參考。

因此改變$scope.selectedCountry = { name: 'A' };到$scope.selectedCountry = $scope.locations[0];

工作演示：

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>

來源

2017-06-16 14:37:40 anoop

@anoop，有什麼想法嗎？這是一個有2個字段的表單。第一個關於國家的工作，但不是第二個。

只是另一個小問題，如果你允許我，請。我現在正在爲同一頁中的另一個字段做同樣的事情。然而，我經歷了和第一個領域相同的步驟，但它不想與我設置的第二個控制器進行交互。

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>

請問您爲什麼會出現問題，請給我一個提示？我已經通過關於在同一頁面中使用兩個控制器的問題，除非我錯了，代碼似乎是正確的。

來源

2017-06-19 07:43:23

我剛剛發現我可以創建多個模塊，但不能在同一頁面放置多個ng-app。它現在工作完美。

來源

2017-06-19 09:42:23

在AngularJS中設置選項選項

回答

相關問題