【问题标题】:controller function in angularjs?angularjs中的控制器功能?
【发布时间】:2015-08-21 15:34:04
【问题描述】:

我是 Angular js 的新手

控制器在我的代码中无法正常工作

我正在尝试运行以下代码

<!DOCTYPE html>
<html data-ng-app >
<head>
    <title>Using AngularJS Directives and Data binding</title>
</head>
<body>

    name 
    <br />

    <div data-ng-controller="SimpleController">
    <input type="text"  data-ng-model="name"/>{{name}}

    <ul>
    <li data-ng-repeat="cust in customers | filter:name | orderBy:city"> {{cust.name | uppercase}}-{{cust.city | lowercase}} </li>
    </ul>
    </div>

    <script src= "angular/angular.min.js"></script>

    <script>

        var demoApp = angular.module('demoApp',[]);

        demoApp.controller('SimpleController', function($scope){
        $scope.customers=[
        {name:'John Smith', city:'kashipur'},
        {name:'John fds' , city:'san francisko'},
        { name:'shubham', city:'giarhineg'},
        {name:'batra', city:'world'}];
        });
    </script>
</body>
</html>
</html>

但它没有给出欲望输出。

如果我做错了什么,请告诉我。

【问题讨论】:

    标签: javascript angularjs angularjs-module ng-app


    【解决方案1】:

    您应该添加应用的名称。

    ng-app="demoApp"
    

      var demoApp = angular.module('demoApp', []);
    
      demoApp.controller('SimpleController', function($scope) {
        $scope.customers = [{
          name: 'John Smith',
          city: 'kashipur'
        }, {
          name: 'John fds',
          city: 'san francisko'
        }, {
          name: 'shubham',
          city: 'giarhineg'
        }, {
          name: 'batra',
          city: 'world'
        }];
      });
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app="demoApp">
      name
      <br />
    
      <div data-ng-controller="SimpleController">
        <input type="text" data-ng-model="name" />{{name}}
    
        <ul>
          <li data-ng-repeat="cust in customers | filter:name | orderBy:city">{{cust.name | uppercase}}-{{cust.city | lowercase}}</li>
        </ul>
      </div>
    </div>

    【讨论】:

      【解决方案2】:

      您缺少在 ng-app 指令中添加值,该指令告诉 Angular 在页面上运行 demoApp 模块。

      ng-app="demoApp"
      

      【讨论】:

      • @Shubhambatra 很高兴为您提供帮助..谢谢 :)
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-04-01
      • 1970-01-01
      • 2023-03-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多