angularJs - 在我的代码中获得这样的输出 {{student.fullname();}}答案

【问题标题】：angularJs - Getting output like this {{student.fullname();}} in my codeangularJs - 在我的代码中获得这样的输出 {{student.fullname();}}
【发布时间】：2015-04-25 05:07:45
【问题描述】：

我正在尝试运行一个简单的代码，但它不起作用。我得到了这样的东西{{student.fullname();}}。

可以帮帮我吗？

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Angular</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="mainApp" ng-controller="studentController">
FirstName : <input type="text" class="form-control" ng-model=student.firstname/> <br> <br>
LastName :<input type="text" class="form-control" ng-model=student.lastname/><br> <br>
Your fullName is : {{student.fullname()}}</div>
<script>
var mainApp= angular.module("mainApp",[])
mainApp.controller('studentController',function($scope){
$scope.student={
  firstname="Hariharan",
  lastname="Sriram",
  fullname=function(){
        var obj;
        obj=$scope.student;
        return student.firstname" + "student.lastname;
  };
});

</script>
</body>
</html>

【问题讨论】：

“不工作”是无用的信息。告诉我们它做了什么，以及您希望它做什么。还要添加您在浏览器的 javascript 控制台中看到的任何错误。
对象字面量（您的$scope.student）使用: 而不是= 为属性名称赋值

标签： angularjs twitter-bootstrap angularjs-directive

【解决方案1】：

在你的代码中很少有语法错误，你可以试试这个：

HTML 代码

<div  ng-app="mainApp" ng-controller="studentController">
  FirstName :
  <input type="text" class="form-control" ng-model="student.firstname" />
  <br>
  <br>LastName :
  <input type="text" class="form-control" ng-model="student.lastname" />
  <br>
  <br>Your fullName is : <span ng-bind="student.fullname()"></span>
</div>

控制器代码：

$scope.student = {
  firstname: "Hariharan",
  lastname: "Sriram",
  fullname: function() {
    var obj;
    obj = $scope.student;
    return obj.firstname + "  " + obj.lastname;
  }
};

Plunker Demo

【讨论】：

不错。我正在努力解决它，但我对 Angular 不熟悉。以下是您的实际建议：plnkr.co/edit/qWBsjXiP55IpZfoGsMrp?p=preview

【解决方案2】：

您的脚本似乎语法错误。您没有定义 Javascript：

$scope.student = {
    firstname: "Hariharan",
    lastname: "Sriram",
    fullname: function() {
        var obj;
        obj = $scope.student;
        return obj.firstname + "  " + obj.lastname;
    }
};

您也可以直接在 HTML 视图中执行此操作（另一种解决方案）：

Your fullName is : {{student.firstName + ' ' + student.lastName}}</div>

这样，你就不用写一段Javascript了。

【讨论】：

【解决方案3】：

您提供的信息不足以帮助您。作为 angularjs 中的新手，您应该学习如何使用控制台来轻松调试。对于您的问题，我认为您忘记在第一行末尾添加分号。

var mainApp= angular.module("mainApp",[]);

为了良好的实践，你应该识别你的代码是这样的

<!DOCTYPE html>
<html>
<head>
  <meta charset="ISO-8859-1">
  <title>Angular</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
  <div  ng-app="mainApp" ng-controller="studentController">
    FirstName :
    <input type="text" class="form-control" ng-model="student.firstname" />
    <br>
    <br>LastName :
    <input type="text" class="form-control" ng-model="student.lastname" />
    <br>
    <br>Your fullName is : <span ng-bind="student.fullname()"></span>
  </div>

  <script>
    var mainApp = angular.module("mainApp",[]);
    mainApp.controller("studentController", ['$scope', function($scope){
        $scope.student = {
       firstname: "Hariharan",
       lastname: "Sriram",
       fullname: function() {
         var obj;
         obj = $scope.student;
         return obj.firstname + "  " + obj.lastname;
       }
     }
   }]);
  </script>
</body>
</html>

【讨论】：

【解决方案4】：

您的代码中有多个问题：

在 HTML 中，无论何时使用 ng-model，您都需要在“”中添加模型
调用作用域方法时，HTML 中不需要分号
在您的控制器代码中，您需要在模式{key: value} 中指定对象，而不是在javascript 中指定{key= value}。
在您的 fullname() 函数中，如果您在 obj 中引用 student 但仍使用学生对象

下面是更新后的运行 sn-p 代码

// Code goes here

var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
  $scope.student = {
    firstname: "Hariharan",
    lastname: "Sriram",
    fullname: function() {
      var obj;
      obj = $scope.student;
      return obj.firstname + " " + obj.lastname;
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="studentController">
  FirstName :
  <input type="text" class="form-control" ng-model="student.firstname" />
  <br>
  <br>LastName :
  <input type="text" class="form-control" ng-model="student.lastname" />
  <br>
  <br>Your fullName is : <span ng-bind="student.fullname()"></span>
</div>

【讨论】：