Question

这是我的代码

<!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>

在输入文本框时会出现值，但我只想点击按钮后才能显示值。请帮帮我我尝试过两种方式简单，也可以使用服务或工厂方法，但没有成功

Answer 1

您必须分离输入文本和目标字段的ng模型。由于具有相同的模型，它们正在实时更新。

我为您创建了正确的版本：

＆＃13;

<!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>

＆＃13;

更新：以下是使用工厂的另一个版本：

＆＃13;

    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;
        };
    })

＆＃13;

    <!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>

＆＃13;

angularjs仅在单击按钮后从文本框中获取值

1 个答案: