Question

我正在尝试运行一个简单的代码，但它不起作用。我得到的是这样的{{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>

Answer 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

Answer 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。

Answer 3

您提供的信息不足以帮助您。作为angularjs中的新功能，您应该学习如何使用控制台轻松进行调试。对于你的问题，我认为你忘了在第一行的末尾添加一个半colone。

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>

Answer 4

您的代码中存在多个问题：

在HTML中使用ng-model时，您需要在＆＃34;＆＃34;
调用范围方法时，您不需要HTML中的分号
在您的控制器代码中，您需要在javascript中指定模式{key: value}而不是{key= value}中的对象。
在fullname()函数中，如果您在student中引用obj但仍使用学生对象

以下是代码的更新运行代码段

＆＃13;

// 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;
    }
  };
});

＆＃13;

<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>

＆＃13;

angularJs - 在我的代码中获得类似{{student.fullname（）;}}的输出

4 个答案: