CODEWITHSUNDEEP
javascripthtmlangularjs
Muhammad Habib
Muhammad Habib

Reputation: 119

AngularJS starter stuck

Just need an explanation on why this is not working? Im trying to follow tutorials from tutorial points. The first and second model do working fine. But not for third model. Can someone explain to me why it is not working? Thanks in advance.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

..........

<body ng-app="mainApp" ng-controller="machineController">

  <input type="text" ng-model="anyText.first" placeholder="any text here" />
  <input type="text" ng-model="anyText.second" placeholder="any text here" />

  <span>{{ anyText.third() }}</span>

  <script>
    var app = angular.module("mainApp", []);

    app.controller('machineController', function($scope) {
      $scope.anyText = {
        first: "This is first default text",
        second: "This is second default text",

        third: function() {
          $object = $scope.anyText;
          var newtext = anyText.first + " ::: " + anyText.second;
          return newtext;
        }

      };
    });
  </script>

</body>

Upvotes: 0

Views: 53

Answers (3)

Rakesh Burbure
Rakesh Burbure

Reputation: 1045

You also replace those 3 lines with a simple 1 line as below

 return $scope.anyText.first + " ::: " + $scope.anyText.second;

Complete code is as below

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

..........

<body ng-app="mainApp" ng-controller="machineController">

    <input type="text" ng-model="anyText.first" placeholder="any text here" />
    <input type="text" ng-model="anyText.second" placeholder="any text here" />

    <span>{{ anyText.third() }}</span>

    <script>
        var app = angular.module("mainApp", []);

        app.controller('machineController', function ($scope) {
            $scope.anyText = {
                first: "This is first default text",
                second: "This is second default text",

                third: function () {
                    return $scope.anyText.first + " ::: " + $scope.anyText.second;
                }

            };
        });
    </script>

</body>
</html>

Upvotes: 0

leoybkim
leoybkim

Reputation: 312

anyText.first and anyText.second is not being referenced by the $scope. Since you are using $object to reference $scope.anyText, you can try to change your code like this:

$object = $scope.anyText;
var newtext = $object.first + " ::: " + $object.second;
return newtext;

Here is a working plunker https://plnkr.co/edit/1dtKDseuIqt3k3UoeEOA

Upvotes: 1

dolphin
dolphin

Reputation: 132

You must replace this line

var newtext = anyText.first + " ::: " + anyText.second;

with

var newtext = $object.first + " ::: " + $object.second;

as anyText variable is not defined 

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>


<body ng-app="mainApp" ng-controller="machineController">

 <input type="text" ng-model="anyText.first" placeholder="any text here"/>
 <input type="text" ng-model="anyText.second" placeholder="any text here"/>

 <span>{{ anyText.third() }}</span>

 <script>
  var app = angular.module("mainApp", []);

  app.controller('machineController',function($scope){
      $scope.anyText = {
          first: "This is first default text",
          second: "This is second default text",

          third: function(){
              $object = $scope.anyText;
              var newtext = $object.first + " ::: " + $object.second;
              return newtext;
          }

      };
  });
</script>

</body>

Upvotes: 3

Related Questions