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>

最好将您的国家/地区置于常量静态内，或者如果从服务器中检索它们，则将其移至服务内部。

我希望它有所帮助

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

1 个答案: