javascript - Angular JS 使用 url 参数预填充表单

Question

我有以下 Angular Controller :

'use strict';
angular.module("generatorApp").controller('demogController',['$scope','$location','$http',function($scope, $location, $http){
        $scope.submit=function(){
        var feet=$scope.feet;
        var inches=$scope.inches;
        var isMale = false;

        if($scope.gender == 'male'){
            isMale = true; 
        }else{
            isMale = false;
        };

        var data = {
            emailId:$scope.emailId,
            gender:isMale,      
            heightCm: 2.54 *(this.feet * 12 + this.inches)      
        };

        localStorage.setItem('demogData', JSON.stringify(data));

    };  
}]);

现在这是 html:

<table>
<tr>
    <th> feet </th>
    <th> inches </th>
</tr>
<tr>
    <td><input type="number" ng-model="feet" placeholder="ft" name="feet" id="feet"></td>
    <td><input type="number" ng-model="inches" placeholder="in" name="inches" id="inches"><td>
</tr>   
</table>

电子邮件和其他一些条目依此类推。 我正在尝试使用以下格式的 url 字符串来预填充这些表条目:

https://blahblah.com/form?feet=x&inches=y 

因此，如果输入以下字符串，则已经填充了 by 表单。任何建议，将不胜感激。

Answer 1

您可以通过以下方式获取查询字符串参数:

$scope.feet = $location.search().feet; 

通常建议您用于 ng-model 的模型是对象的属性。例如:

$scope.formModel = {
    feet: $locaion.search().feet,
    inches: $location.search().inches
};

然后这样引用它们:

<tr>
<td><input type="number" ng-model="formModel.feet" placeholder="ft" name="feet" id="feet"></td>
<td><input type="number" ng-model="formModel.inches" placeholder="in" name="inches" id="inches"><td>
</tr>