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

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

请记住，由于 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。

Answer 2

在您输入任何值之前拨打您的电话。为了用 inputValue 调用 API，请将 get 调用放在单击按钮内。

此外，您不必将 inputValue 传递到 HTML 的函数中，Angular 的 2 种方式绑定将为您完成这项工作。

例如： 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);
                     });
                });
 };

希望对您有所帮助。

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

accessing angularjs textbox value in a controller

html

angularjs

controller

angularjs-scope