如何自動填充angularjs中的輸入字段？

Question

我只想通過插入名字和姓氏輸入框來填充全名輸入框。 我只是在輸入框中綁定了來自以上兩個值的數據，但它沒有顯示在全名輸入框中。 提前致謝！！ 代碼：

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

                First Name: <input type="text" ng-model="firstName"><br>
                Last Name: <input type="text" ng-model="lastName"><br>
                Full Name:<input ng-bind="firstName+" "+lastName>

                    <script>
      var app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope) {
      $scope.firstName = "John";
      $scope.lastName = "Doe";
      });
       </script>

Answer 1

您不能對 HTML 屬性使用ng-bind指令，請參閱文檔。

ng-bind可用於其他 HTML 標簽：

<span ng-bind="firstName + ' ' + lastName"></span>

通過input標簽，您可以使用以下指令：

<input type="text"
       ng-model="string"
       [name="string"]
       [required="string"]
       [ng-required="string"]
       [ng-minlength="number"]
       [ng-maxlength="number"]
       [pattern="string"]
       [ng-pattern="string"]
       [ng-change="string"]
       [ng-trim="boolean"]>

但是，您可以在 HTML value屬性中使用花括號表示法：

<input value="{{firstName + ' ' + lastName}}">

像這樣的東西：

 (function() { var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); }());

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br> Full Name: <input value="{{firstName + ' ' + lastName}}"> <span ng-bind="firstName + ' ' + lastName"></span> </div>

Answer 2

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

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

     <script>
          var app = angular.module('myApp', []);
          app.controller('myCtrl', function($scope) {
          $scope.firstName = "John";
          $scope.lastName = "Doe";
          $scope.fullName =  $scope.firstName  + " " + $scope.lastName;
       });
     </script>