在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中设置选项选项

回答

相关问题