Question

我刚刚开始学习AngularJS并面临一个问题。当我运行以下代码时{{ cust.name }} - {{ cust.city }}被打印而不是我传递的实际数据。

我的代码：

<html data-ng-app="">
  <head>
    <title>Using angularJS directive and data binding </title>
  </head>
  <body>
    <div data-ng-controller="SimpleController">
      Name:
      <br/>
      <input type="text" data-ng-model="name" />
      <br/>
      <ul>
        <li data-ng-repeat="cust  in customers | filter:name"> {{ cust.name }} - {{ cust.city }}
        </li>
      </ul>
    </div>
    <script src="Scripts/angular.min.js"></script>
    <script>
      function SimpleController($scope) {
        $scope.customers = [{
          name: 'Abhijeet Singh',
          city: 'New Delhi'
        }, {
          name: 'Dhiraj Mehta , city: New Delhi '
        }];
      }
    </script>
  </body>
</html>

Answer 1

您的代码中缺少一些内容。

首先，最好为您的应用和控制器命名：

<body data-ng-app='myApp' data-ng-controller='myCtrl'>

第二，每当你在Angular中引用任何东西时，都必须在控制器的范围内。目前你的$ scope在＆＃34; SimpleController＆＃34;的范围内。功能而不是Angular的控制器（你需要一个角度控制器，在控制器内和你的html中都有$ scope可用，例如双花括号）：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//$scope is available anywhere within this scope
}

以下是您的代码工作示例：https://jsfiddle.net/AKMorris/03hshn5m/

Answer 2

您需要声明应用名称并查看其他设置。

其余的事情是一样的。

var myApp = angular.module("MyApp", []);
var simpleController = angular.module("SimpleController", SimpleController);

simpleController.$inject = ['$scope'];

function SimpleController($scope){
   $scope.customers = [{
          name: 'Abhijeet Singh',
          city: 'New Delhi'
        }, {
          name: 'Dhiraj Mehta , city: New Delhi '
        }];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html data-ng-app="MyApp">
  <head>
    <title>Using angularJS directive and data binding </title>
  </head>
  <body>
    <div data-ng-controller="SimpleController">
      Name:
      <br/>
      <input type="text" data-ng-model="name" />
      <br/>
      <ul>
        <li data-ng-repeat="cust  in customers | filter:name"> {{cust.name }}-{{cust.city}}
        </li>
      </ul>
    </div>
  </body>
</html>

控制器不会绑定到视图

我的代码：

2 个答案: