angularjs - 如何使用 ng-model 将输入中的数据与 Controller 绑定(bind)？

Question

我正在学习 Angular，我做了这个，它工作正常，很简单:

<span>Your Name:</span><h1>{{Name.first+' '+Name.second}}</h1>

<script>
    var app = angular.module('myApp', []);
    app.controller('myController', function ($scope) {
        $scope.Name = { first: 'First', second: 'Second' };
    })
</script>

但是我希望 Controller 从文本输入中读取值，所以我做了这个:

    <p>First Name: <input type="text" ng-model="fName" /></p>
    <p>Last Name: <input type="text" ng-model="lName" /></p>
    <span>Your Name:</span><h1>{{Name.first+' '+Name.second}}</h1>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function ($scope) {
            $scope.Name = { first: $scope.fName, second: $scope.sName };
        });
    </script>

但这不起作用，我是初学者，可以确定我做错了

Answer 1

当您将 $scope.name 显示为输出时，您必须使用某些事件来更新您的 $scope.Name 对象。

目前我使用的是 ng-change 你也可以使用 ng-click 等。根据要求

var app = angular.module('myApp', []);
    app.controller('myController', function ($scope) {        
      
      $scope.getName=function(){
        $scope.Name = { first: $scope.fName, second: $scope.lName };
      }
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
    <p>First Name: <input type="text" ng-change="getName()" ng-model="fName" /></p>
    <p>Last Name: <input type="text" ng-change="getName()" ng-model="lName" /></p>
    
    <span>Your Name:</span><h1>{{Name.first+ " " +Name.second}}</h1>
  </div>