Question

我在控制器中通过ajax请求设置文本框的值，如下所示：

$http({method: 'GET', url: url}).success(function(data) {
                $scope.valzz = data;
                $scope.company = $scope.valzz[0].Company;   

            });

然后在我的HTML中：

<label class="item item-input item-stacked-label">
            <span class="input-label">Company :</span>
            <input type="text" placeholder="Company" value="" ng-model="company">
          </label>

<button class="button button-positive" style="margin-top:10px;" ng-click="saveChanges()">
  Save Changes
</button>

这正确地将公司名称放在公司文本框中。但是当对该文本框进行更改并按下保存按钮时，文本框的新值不会显示 - 它仍然会获得原始文本框。这是控制器中的按钮单击：

$scope.saveChanges=function(){

            alert($scope.company);

    };

为什么$scope.company不是文本框的新值？难道我做错了什么？（对不起，如果基本我是角色的新手）

Answer 1

尝试删除value=""

HTML：

<label class="item item-input item-stacked-label">
    <span class="input-label">Company :</span>
    <input type="text" placeholder="Company" ng-model="company">
</label>

<button class="button button-positive" style="margin-top:10px;" ng-click="saveChanges()">
  Save Changes
</button>

在相应的CONTROLLER中：

$scope.saveChanges = function() {
    alert($scope.company); 
};

Answer 2

您没有该模型的观察者。

$scope.$watch('company', function(company) {
  console.log(company);
}

或者在模板中，您可以插值：

{{company}}

然后你可以在html页面上看到它发生了变化，因为angular会在幕后制作一个观察者

Answer 3

需要将this.company放入$ scope

Answer 4

请在$ http call

之前定义$ scope.company

app.controller('myCtrl', function($scope, $http){
  $scope.company = null; // <--
  $http({method: 'GET', url: url}).success(function(data) {
    $scope.valzz = data;
    $scope.company = $scope.valzz[0].Company;

  });
}

因为，一旦部分渲染，它只获得$scope中定义的属性。之后，如果在$ scope内添加了任何属性，则需要调用$apply。

希望这可以帮助你。

Answer 5

我认为你的$ scope工作正常，你已经在应用程序中初始化了控制器，并链接到正确的控制器文件。请将您的代码与我的代码进行比较，因为这样做正常。

HTML：

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src ="controller.js"></script>
    </head>
<body>

<div ng-app="myApp" ng-controller="testController">
<form>
    <label class="item item-input item-stacked-label">
                <span class="input-label">Company :</span>
                <input type="text" placeholder="Company" ng-model="company">
              </label>

    <button class="button button-positive" style="margin-top:10px;" ng-click="saveChanges()">
      Save Changes
    </button>
</form>
</div>
</body>
</html>

控制器：

(function(){
    'use strict';
    var app = angular.module('myApp', []);
    app.controller('testController', [ '$scope', function ($scope){

            $scope.saveChanges=function(){
                alert($scope.company);
            };

        }]);

})();

修改：Fiddle

按下按钮后，AnjularJS获取文本框的值

5 个答案: