如何向此Angular JS应用程序添加编辑事件？

Question

Please, I have this block of code and I'm at a loss on how to add an edit event and button. Any help please?

<script>
  var firstApp = angular.module('firstApp', []);
  firstApp.controller('FirstController', function($scope) {
    $scope.toic = '';
    $scope.discussion = '';
    $scope.updateMessage = function() {
      $scope.heading = $scope.topic;
      $scope.body = $scope.discussion;
    };
  });
</script>
<input ng-model="topic">
<input ng-model="discussion">
<button ng-click="updateMessage()">click<button>

<div>
{{heading}} 
{{Body}}
</div>

Answer 1

You are close, but you have a few typos and missing information that is causing this to not work:

1) You need to wrap your HTML in an element that has ng-app and ng-controller attributes so angular knows which module/controller to use for the logic in your bindings.

2) $scope.toic should be $scope.topic

3) {{Body}} should be {{body}}

4) <button ...><button> should be <button ...></button> (missing / on closing tag)

 var firstApp = angular.module('firstApp', []); firstApp.controller('FirstController', function($scope) { $scope.topic = ''; $scope.discussion = ''; $scope.updateMessage = function() { $scope.heading = $scope.topic; $scope.body = $scope.discussion; }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="firstApp" ng-controller="FirstController"> <input ng-model="topic"> <input ng-model="discussion"> <button ng-click="updateMessage()">click</button> <div>{{heading}} {{body}} </div> </div>