angularjs點擊按鈕之後，從文本框獲取值僅

這是我的代碼，同時輸入到文本框，但僅在按下button.Please幫我之後，我想值angularjs點擊按鈕之後，從文本框獲取值僅

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
    <script> 
     var myApp = angular.module('myApp', []); 
     myApp.controller('myController', function ($scope) { 

      $scope.getName = function() { 
       $scope.name = fname; 
       $scope.lastName = lastName; 
      }; 

     }) 
    </script> 
</head> 
<body ng-app="myApp" > 
    <div > 
     <input type="text" ng-model="name"/> <br> 
     <input type="text" ng-model="lastName" /> 
    </div> 
    <div ng-controller="myController"> 
     <input type="button" value="click" ng-click="getName()" /> 
     <br> 
     Hello FirstName {{name}}<br> 
     Last Name {{lastName}} 

</div> 
</body> 
</html>

值都來了。
我嘗試了兩種方式簡單以及使用服務或工廠方法，但沒有成功

來源

2017-02-17 ishan

您必須分隔輸入文本和目標字段的ng模型。由於具有相同的模型，它們正在實時更新。

我創建了正確的版本爲您提供：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 
    <script> 
 
     var myApp = angular.module('myApp', []); 
 
     myApp.controller('myController', function ($scope) { 
 

 
      $scope.getName = function() { 
 
       $scope.nameToSet = $scope.name; 
 
       $scope.lastNameToSet = $scope.lastName; 
 
      }; 
 

 
     }) 
 
    </script> 
 
</head> 
 
<body ng-app="myApp" > 
 
    <div > 
 
     <input type="text" ng-model="name"/> <br> 
 
     <input type="text" ng-model="lastName" /> 
 
    </div> 
 
    <div ng-controller="myController"> 
 
     <input type="button" value="click" ng-click="getName()" /> 
 
     <br> 
 
     Hello FirstName {{nameToSet}}<br> 
 
     Last Name {{lastNameToSet}} 
 

 
</div> 
 
</body> 
 
</html>

UPDATE：這裏是另一個版本使用工廠：

var myApp = angular.module('myApp', []); 
 
    myApp.factory('container', function() { 
 
     var model = { 
 
      name: '', 
 
      lastName: '' 
 
     }; 
 
     return { 
 
      model: model, 
 
      setName: function(nameToSet) { 
 
      model.name = nameToSet; 
 
      }, 
 
      setLastName: function(lastNameToSet) { 
 
      model.lastName = lastNameToSet; 
 
      } 
 
     }; 
 
    }); 
 
    myApp.controller('myController', function ($scope, container) { 
 
     $scope.$watch('name', function(newvalue,oldvalue) { 
 
      container.setName(newvalue); 
 
     }); 
 
     $scope.$watch('lastName', function(newvalue,oldvalue) { 
 
      container.setLastName(newvalue); 
 
     }); 
 
     $scope.onNameType = function(value) { 
 
      container.setName(value); 
 
     }; 
 
     $scope.onLastNameType = function(value) { 
 
      container.setLastName(value); 
 
     }; 
 
     $scope.getName = function() { 
 
      debugger; 
 
      $scope.nameToSet = container.model.name; 
 
      $scope.lastNameToSet = container.model.lastName; 
 
     }; 
 
    })

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 
    </head> 
 
    <body ng-app="myApp" > 
 
     <div > 
 
      <input type="text" ng-model="name" ng-change="onNameType(name)"/> <br> 
 
      <input type="text" ng-model="lastName" ng-change="onLastNameType(lastName)" /> 
 
     </div> 
 
     <div ng-controller="myController"> 
 
      <input type="button" value="click" ng-click="getName()" /> 
 
      <br> 
 
      Hello FirstName {{nameToSet}}<br> 
 
      Last Name {{lastNameToSet}} 
 

 
    </div> 
 
    </body> 
 
    </html>

來源

2017-02-17 07:19:48 webmaster

你好，先生..謝謝你的回答 – ishan

因爲我是新的請指導我如何使用服務或工廠達到同樣的東西 – ishan

好吧我會更新答案，請不要忘記標記爲正確的答案 – webmaster

angularjs點擊按鈕之後，從文本框獲取值僅

回答

相關問題