Question

我正在尝试学习AngularJS，并且在按钮单击后传递用户输入的文本框文本值时需要帮助，以便在调用http服务时附加到字符串url值。

我正在尝试按以下方式添加，但是在使用用户从文本框输入的文本附加URl时，它向我显示未定义的值。

这是我的HtmlPage1.html

              <form ng-submit="abc(inputValue)">
                    <input type="text" name="name" ng-model="inputValue" />
                    <button type="submit">Test</button>
                </form>

和我的脚本文件Script.js

           var app = angular.module("repos", [])
            .controller("reposController", function ($scope, $http, $log) {
                $scope.inputValue = null;
                $scope.abc = function (value) {
                    $scope.inputValue = value;
                };

                $http({
                    method:'GET',
                    url:     'https://api.github.com/users/'+$scope.inputValue+'/repos'
                })
                        .then(function (response) {
                            $scope.repos = response.data;
                            $log.info(response);
                        });
            });

在这方面，有谁可以帮助我如何获得用户输入的正确值以附加到URL？

提前致谢。

Answer 1

在您输入任何值之前，您的来电已被放置。要使用inputValue调用API，请将get调用放在按钮单击中。

此外，您不必将inputValue从HTML传递到函数中，Angular的双向绑定将为您完成工作。

例： HTML

<form ng-submit="abc()">
     <input type="text" name="name" ng-model="inputValue" />
     <button type="submit">Test</button>
</form>

JS：

    var app = angular.module("repos", [])
                .controller("reposController", function ($scope, $http, $log) {
                    $scope.inputValue = null;
                    $scope.abc = function () {
                        $log.info($scope.inputValue) // you will have your updated value here
                        $http({
                        method:'GET',
                        url:     'https://api.github.com/users/'+$scope.inputValue+'/repos'
                    })
                    .then(function (response) {
                         $scope.repos = response.data;
                         $log.info(response);
                     });
                });
 };

我希望这会有所帮助。

Answer 2

请记住，由于双向绑定，您的控制器上已有代码。

在那里，您将为模型设置一个对象。广告以后您可以使用它们来提交数据。

为了让你明白我想要解释的是我做了一个例子，我希望它能帮助

在你的代码中：
在输入标签上设置ng-model

<input type="text" name="name" ng-model="vm.data.inputValue" />

在您的控制器上，使其可用，如我的示例

   vm.data ={};

然后使用函数使用ng-click发送它。

<button type="submit" ng-click="vm.submit()">Test</button>

我相信有更多方法可以做到这一点。

我不是那么好，解释所以我做了一个例子，我希望有所帮助： https://jsfiddle.net/moplin/r0vda86d/

我的例子基本相同，但我不想使用$ scope。

访问控制器中的angularjs文本框值

2 个答案: