AngularJS - 从组合框/下拉列表中获取价值

Question

我正在尝试构建和使用简单的注册表单，并且在我的HTML中使用该表单。 我一直在努力从我的下拉选项中获取选定的值，现在我正在使用静态值来确保将值传递给我的数据库并创建成功的注册操作。 我的HTML有一大块选项，我想知道是否可以将这些数据放入我的控制器中，并仍然显示在我的HTML中作为选项？ 以及我如何从我的HTML绑定值并将其发送到我的服务器？

HTML：

<header id="top" class="header"> 
     <div class="text-vertical-center"> 
      <h1>Tester</h1> 
      <h3>The test.</h3> 
      <br> 
      <a class="btn btn-dark btn-lg" data-toggle="modal" data-target="#myModal">Sign Up</a> 
      <!-- Modal --> 
      <div class="modal fade" id="myModal" role="dialog"> 
       <div class="modal-dialog modal-sm"> 

        <!-- Modal content--> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal">&times;</button> 
          <h3 class="modal-title">Sign Up</h3> 
         </div> 
         <div class="modal-body"> 
          <form action="" method="" class="form-signin" ng-app="signUpCtr" ng-controller="mainController"> 
           <input type="text" id="inputName" class="form-control" placeholder="Name" ng-model="name" required autofocus> 
           <span id="reauth-email" class="reauth-email"></span> 
           <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus ng-model="email"> 
           <input type="password" id="inputPassword" class="form-control" placeholder="Password" ng-model="password" required> 
<select ng-model="region" ng-options="x for (x,y) in countries" id="inputRegion" class="form-control"></select> 

           <br/> 
           <div class="terms"> 
            <a href="terms.html" target="_blank">Terms of Use</a> 
           </div> 
           <button ng-click="signUp()" class="btn btn-lg btn-primary btn-block btn-signin" type="button">Sign Up</button> 
          </form> 
         </div> 
         <div class="modal-footer"> 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         </div> 
        </div> 

       </div> 
      </div> 
     </div> 
    </header> 

JS（控制器）：

var app = angular.module('signUpCtr', []) 
var appPath = "https://google.com"; 

app.controller('mainController', function($scope,$http, $window) { 
    $scope.signUp = function(){ 
     if($scope.name=="") 
      return $scope.errorMsg = "Please Enter Valid Name"; 
     if($scope.password=="") 
      return $scope.errorMsg = "Please Enter Valid Password"; 
     if($scope.email=="") 
      return $scope.errorMsg = "Please Enter Valid Email"; 
     if($scope.region=="") 
      return $scope.errorMsg = "Please Enter Region"; 

    $scope.countries = { 
     Afghanistan : "AFG", 
     Albania : "ALB", 
     Algeria : "DZA", 
     Andorra : "AND" 
    }; 

     console.log("User "+$scope.email+" logged in"); 
     var user = { 
      'name': $scope.name, 
      'password': $scope.password, 
      'email': $scope.email, 
      'region': "USA" 
     }; 
     $http.post(''+appPath+'/signUp', user) 
      .then(function(data){ 
      $window.location.href = 'http://www.google.com'; 
     }); 
    }; 
}); 

，但没有成功，没有选项的下拉列表中显示。

Answer 1

当然可以。看看ng-options

https://docs.angularjs.org/api/ng/directive/select

所以你的情况定义你的列表中选择控制器内，例如：

$scope.countries = ALLMYLIST; 

至于例如：

$scope.countries = [{name: 'Italy', value: 'IT'}, {name: 'England', value: 'EN' }]; 

然后就去做：

<select name="countries" id="inputRegion" ng-model="region"> 
     <option ng-repeat="country in countries" value="{{country.value}}">{{option.name}}</option> 
    </select> 

如果您的国家是静态的，或者如果您从服务器检索它们，那么将其置于服务内部会更好。

我希望它有帮助