AngularJSがコントローラーを作成しています

これは表示されない理由が分かりますか？ View1.htmlとView2.htmlドキュメントは、partialsフォルダに配置されています。ときには、完全に空白の画面が表示されることがあります。名前とテキストボックスが表示されることがあります.View1が表示されることもありますが、顧客名は表示されません。おかげで..AngularJSがコントローラーを作成しています

<!DOCTYPE html> 
<html ng-app="demoApp"> 
<head> 
<base href="/"> <!-- needed for Angular HTML 5 mode --> 
    <title>Angular Todo</title> 
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/bower_components/bootstrap/dist/css/bootstrap.css"> 
    <script type="text/javascript" src="http://localhost:8080/bower_components/jquery/dist/jquery.js"></script> 
    <script type="text/javascript" src="http://localhost:8080/bower_components/bootstrap/dist/js/bootstrap.js"></script> 
    <script type="text/javascript" src="http://localhost:8080/bower_components/angular/angular.js"></script> 
    <script type="text/javascript" src="http://localhost:8080/bower_components/angular-route/angular-route.js"></script> 
    </script> 

    <style> 
    .container{ 
     padding: 20px; 
     background-color: green; 
    } 

    </style> 

</head> 
<body> 
    <div> 
     <div data-ng-view></div> 

    </div> 

     <script> 

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

      demoApp.config(function ($routeProvider){ 
       $routeProvider 
       .when('/', 
       { 
         controller: 'SimpleController', 
         templateUrl: 'Partials/View1.html' 
       }) 
       .when('/view2', 
       { 
         controller: 'SimpleController' 
         templateUrl: 'Partials/View2.html' 
       }) 
       .otherwise({ redirectTo: '/'}); 

      }); 


       demoApp.controller('SimpleController', function ($scope) { 
       $scope.customers = [{ 
         name: 'John Doe', city: 'New York' 
        }, 
        { 
         name: 'John Smith', city: 'Phoenix' 
        }, 
        { 
         name: 'Jane Doe', city: 'San Francisco' 
        } 
        ]; 

        $scope.addCustomer= function(){ 
         $scope.customers.push(
          { name: $scope.newCustomer.name. city: $scope.newCustomer.city 
          }); 
        }; 
       }); 

     </script> 



<script src='js/controller.js'></script> 

</body> 
</html>

出典

2017-02-22 Merialc

はあなたが何も表示されないこの

<li data-ng-repeat="cust in customers | filter:name | orderBy: 'name'"> {{cust.name}} </li>

コントローラ

$scope.name = 'Saurabh';

出典

2017-02-22 15:43:38

を試してみてください。試してみてくださいこの

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

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

 
demoApp.controller('SimpleController', function($scope) { 
 
    $scope.customers = [{ 
 
     name: 'John Doe', 
 
     city: 'new york' 
 
    }, 
 
    { 
 
     name: 'john smith', 
 
     city: 'phoenix' 
 
    }, 
 
    { 
 
     name: 'jane doe', 
 
     city: 'san francisco' 
 
    } 
 
    ]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demoApp" class="container" data-ng-controller="SimpleController"> 
 

 
    Name: 
 
    <br /> 
 
    <input type="text" data-ng-model="name" /> 
 
    <br /> 
 
    <ul> 
 
    <li data-ng-repeat="cust in customers | filter:name | orderBy: 'name'"> 
 
    {{cust.name}}:{{cust.city}} 
 
    </li> 
 
    </ul> 
 

 
</div>

出典

2017-02-22 15:44:11

あなたがプロパティをバインドすることを忘れ

<li data-ng-repeat="cust in customers | filter:name | orderBy: 'name'"> 

     <span ng-bind="cust.name"></span> 

</li>

出典

2017-02-22 15:55:24

AngularJSがコントローラーを作成しています

答えて

関連する問題