用户单击“提交”按钮时如何显示用户输入。当用户单击清除按钮时也清除该消息。 (Angularjs)

时间:2017-06-05 02:56:31

标签: javascript angularjs input

当用户点击提交按钮时,如何显示用户输入。当用户单击清除按钮时也清除该消息。 (请和谢谢)

<html>

<head>
  <title></title>

    angular.module('exampleModule', [])

    .controller('messageController', ['$scope', function($scope) {

      $scope.message = '';

    }])
  </script>
</head>

<body ng-app="exampleModule">

  <div ng-controller="messageController">

    Input:
    <input ng-model="message" />

    <button>Submit</button>

    <button>Clear</button>

    <br/>
    <div>Message: {{message}}</div>
  </div>
</body>

</html>

1 个答案:

答案 0 :(得分:1)

为您的按钮提供ng-click事件并在控制器中处理事件。 如果按下提交按钮,则将show veriable设置为true,以便显示它。

<强> HTML:

<div ng-app="exampleModule">
    <div ng-controller="messageController">

         Input:
        <input ng-model="message" />

        <button ng-click="display()">Submit</button>

         <button ng-click="clear()">Clear</button>

         <br/>
         <div ng-show="show">Message: {{message}}</div>
    </div>
</div>

AngularJS控制器:

angular.module('exampleModule', [])
.controller('messageController', ['$scope', function($scope) {
    $scope.show = false;
    $scope.message = '';

    $scope.clear = function() {
        $scope.message = '';
    };

    $scope.display = function() {
        $scope.show = true;
    };
}])

JSFiddle:https://jsfiddle.net/Anokrize/2fvtbwd2/