Question

我正在使用angularJS创建一个简单的应用程序，如下所示。每当我点击＆＃34;添加新客户＆＃34;按钮，我希望将新记录添加到列表中。不幸的是，它并没有像我预期的那样发生。有什么想法

的index.html

＆＃13;

<!DOCTYPE html>
<html data-ng-app="simpleApp">
    <head>
        <title>Using AngularJS to create simpleApp</title>
    </head>
    <body>
        <div data-ng-view="">
        </div>
        
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
        <script src="https://code.angularjs.org/1.3.4/angular-route.js"></script>
        <script src="app/app.js"></script>
        <script src="app/controllers/controllers.js"></script>
        <script src="app/services/customerService.js"></script>
    </body>
</html>

＆＃13;

View1.html

＆＃13;

<div>
    <input type="text" data-ng-model="filter.name"/>
    <ul>
        <li data-ng-repeat="cust in customers | filter: filter.name | orderBy: 'Name'">
            {{ cust.Name | uppercase }} - {{ cust.City | lowercase }}
        </li>
    </ul>
    <br/>
    Customer Name:
    <br/>
    <input type="text" data-ng-model="newCustomer.Name"/>
    <br/>
    Customer City:
    <br/>
    <input type="text" data-ng-model="newCustomer.City"/>
    <br/><br/>
    <button data-ng-click="addNewCustomer()">Add New</button>
    <br/>
    <a href="#/view2">View 2</a>
</div>

＆＃13;

View2.html

＆＃13;

<div>
    <ul>
        <li data-ng-repeat="cust in customers">
            {{ cust.Name | lowercase }} - {{ cust.City | uppercase }}
        </li>
    </ul>
</div>

＆＃13;

app.js

＆＃13;

var app = angular.module("simpleApp", ["ngRoute"]);

app.config(function($routeProvider) {
    $routeProvider
        .when("/", { controller: "simpleController", templateUrl: "app/partials/view1.html" })
        .when("/view2", { controller: "simpleController", templateUrl: "app/partials/view2.html" })
        .otherwise({ redirectTo: "/" });
});

＆＃13;

controllers.js

＆＃13;

app.controller("simpleController", function($scope, simpleFactory) {
    $scope.customers = simpleFactory.getCustomers();
    
    $scope.addNewCustomer = function () {
        alert("Hey Hello");
      $scope.customers.push({
          Name: $scope.newCustomer.Name
          , City: $scope.newCustomer.City
      });
    };
});

＆＃13;

customerService.js

＆＃13;

app.factory("simpleFactory", function() {
    var factory = {};
    
    var customers = [
        { Name: "Dave Jones",  City: "Phoenix" }
        , { Name: "Jamie Riley", City: "Atlanta" }
        , { Name: "Heedy Walhin", City: "Chandler" }
        , { Name: "Thomas Winter", City: "Seattle" }
    ];
    
    factory.getCustomers = function() {
        return customers;
    };
    
    return factory;
});

＆＃13;

angularJS视图没有刷新

0 个答案: