How to I add an edit event to this angular js application?

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>

Hi there! The stackoverflow community enjoys helping out developers achieve their goals, with the premise of helping one's self first. In that regard, have a look at this [link][1] to help you better formulate your question, show your work and help us help you in general. Thanks! [1]: stackoverflow.com/help/how-to-ask — Ralph Thomas Hopper
– Ralph Thomas Hopper, Commented Nov 10, 2017 at 21:42
You have no ng-app or ng-controller attributes, so no bindings will happen. Try wrapping your inputs and your div with <div ng-app="firstApp" ng-controller="FirstController"> — mhodges
– mhodges, Commented Nov 10, 2017 at 22:01
Also, $scope.toic will not be displayed in your input being bound to topic as they are not spelled the same — mhodges
– mhodges, Commented Nov 10, 2017 at 22:02

mhodges · Accepted Answer · 2017-11-10 22:06:23Z

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>

Collectives™ on Stack Overflow

How to I add an edit event to this angular js application?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related