Question

我正在尝试将最初在控制器中设置的ng-model参数绑定回控制器我有类似的东西

    <div ng-app="myApp" ng-controller="personCtrl">

     First Name: <input type="text" ng-model="firstName"><br>
     Last Name: <input type="text" ng-model="lastName"><br>
      </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('personCtrl', function($scope) {
        $scope.firstName = "Leo";
        $scope.lastName = "Messi";

        });
    </script>

我正在尝试在我的控制器中实现PUT方法，因此我需要将新值绑定回控制器。我试过了

        <div ng-app="myApp" ng-controller="personCtrl">
        <form>
         First Name: <input type="text" ng-model="firstName"><br>
         Last Name: <input type="text" ng-model="lastName"><br>
         <button ng-click="UpdateProfile()"> Update </button>
         </form>
         </div>

然后我将控制器更新为

       <script>
        var app = angular.module('myApp', []);
        app.controller('personCtrl', function($scope) {
        $scope.firstName = "Leo";
        $scope.lastName = "Messi";
        $scope.UpdateProfile = function()
           {
               $scope.newFirstName = firstName
           }
        });
    </script>

但我收到一条错误，提到firstName未定义。

任何帮助将不胜感激

Answer 1

应该是：

$scope.UpdateProfile = function()
    {
        $scope.newFirstName = $scope.firstName;
    }
});

Answer 2

或者，您可以进行一些更改以使您自己的版本正常运行。
在控制器中：

$scope.UpdateProfile = function(firstName)
{
    $scope.newFirstName = firstName
}

在HTML中：

<button ng-click="UpdateProfile(firstName)"> Update </button>

Answer 3

您已经通过填充某些值来预定义范围.Scope自己识别更新后的值。

更新您的代码，如下所示： -

 $scope.newFirstName = $scope.firstName;
 $scope.newLastName = $scope.lastName;

https://plnkr.co/edit/NsoxahPcGUBtTYTlruBJ?p=preview

https://docs.angularjs.org/guide/scope - 可以为您提供更多信息以便更好地理解!!

Answer 4

您的代码 - 您已将firstName附加到$ scope变量，该变量是内部对象，firstName是其属性。

例如，如果我使用testController创建一个示例testApp模块并将属性test1附加到它并且控制台记录$ scope变量。然后我可以在控制台中看到整个$ scope对象。 //代码在这里

var app =angular.module('testApp',[]);
app.controller('testController',testController);
testController.$inject=['$scope'];

function testController($scope){
  $scope.test1="plunkr";
  console.log($scope);
}

因此您应该将firstName作为$ scope对象的属性访问，而不是作为变量firstName 所以你的代码应该是

 $scope.firstName = "Leo";
    $scope.UpdateProfile = function()
               {
                   $scope.newFirstName = $scope.firstName
               }
       });

https://plnkr.co/edit/zJ3X3XP9N1C0oZlvZ7mh?p=preview

如何在控制器中获取ng-model参数

4 个答案: