Question

这是我的代码：

的index.html

<!DOCTYPE html>
<html lang="en" ng-app="groceryListApp">
<meta charset="utf-8">

<head>
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Bootstrap 101 Template</title>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>


</head>

<body ng-controller="HomeController">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">
          <span class="glyphicon glyphicon-apple" style="color: #5bdb46">
          </span> 
        Grocery List
        </a>
      </div>
    </div>
  </nav>

  <div class="container" ng-view>

  </div>

<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</body>

</html>

app.js

var app = angular.module('groceryListApp', ["ngRoute"]);

app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "views/groceryList.html",
      controller: "HomeController"
    })

    .when("/addItem",{
       templateUrl: "views/addItem.html",
        controller:  "GroceryListItemController"

      })

    .when("/addItem/edit/:id",{
       templateUrl: "views/addItem.html",
        controller:  "GroceryListItemController"

      })
      .otherwise({
        redirectTo: "/"

      })
});



app.service("GroceryService",function(){

var groceryService = {};

groceryService.groceryItems = [
    {
      id:1,
      completed: true,
      itemName: 'milk',
      date: '2017-10-01'
    },
    {
      id:2,
      completed: true,
      itemName: 'cookies',
      date: '2017-10-02'
    },
    {
      id:3,
      completed: true,
      itemName: 'ice cream',
      date: '2017-10-03'
    },
    {
      id:4,
      completed: true,
      itemName: 'potatoes',
      date: '2017-10-04'
    },
    {
      id:5,
      completed: true,
      itemName: 'cereal',
      date: '2017-10-05'
    },
    {
      id:6,
      completed: true,
      itemName: 'bread',
      date: '2017-10-06'
    },
    {
      id:7,
      completed: true,
      itemName: 'eggs',
      date: '2017-10-07'
    },
    {
      id:8,
      completed: true,
      itemName: 'tortillas',
      date: '2017-10-08'
    }
  ];

  groceryService.findById = function(id){
    for( var item in groceryService.groceryItems){

        if(groceryService.groceryItems[item].id === id) {
          console.log(groceryService.groceryItems[item]);
            return groceryService.groceryItems[item];
      }
    }
  };

  groceryService.getNewId = function(){

    if(groceryService.newId){
      groceryService.newId++;
      return groceryService.newId;

    }else{
      var maxId = _.max(groceryService.groceryItems,function(entry){return entry.id;})

      groceryService.newId = maxId.id + 1;
      return groceryService.newId;
    }

  };


  groceryService.save = function(entry){

    entry.id = groceryService.getNewId();

    groceryService.groceryItems.push(entry);

  };

  return groceryService;


});


app.controller("HomeController", ["$scope","GroceryService", function"($scope, GroceryService) {

  $scope.groceryItems = GroceryService.groceryItems;

}]);

app.controller("GroceryListItemController", ["$scope","$routeParams","$location","GroceryService", function($scope,$routeParams,$location,GroceryService) {

  if(!$routeParams.id){
    $scope.groceryItem = { id:0, completed:false, itemName: "", date: new Date() };
    }else{
      $scope.groceryItem = GroceryService.findById(parseInt($routeParams.Id));

    }

  //$scope.groceryItems = GroceryService.groceryItems;

  //$scope.rp ="Route Parameter Values:" + $routeParams.id;

 // $scope.groceryItem ={ id:7,completed:true, itemName: "cheese",date: new Date() }

  $scope.save = function(){
    GroceryService.save( $scope.groceryItem );
    $location.path("/");
  };

  //console.log($scope.groceryItems);

}]);

groceryList.html

<div class="col-xs-12">
  <a href="#!/addItem" style="margin-bottom: 10px:" class="btn btn-primary btn-lg btn-block">
    <span class="glyphicon glyphicon-plus"></span> Add Grocery Item </a>
  <ul class="list-group">
    <li ng-repeat="item in groceryItems | orderBy: 'date'" class="list-group-item text-center clearfix">
      <span style="font-weight: bold">{{item.itemName | uppercase}}</span>
      <a href="#!/addItem/edit/{{item.id}}" class="btn btn-nm btn-default pull-right">
        <span class="glyphicon glyphicon-pencil"></span>
        </a>
    </li>
  </ul>
</div>

addItem.html

<div class="col-xs-12">
        <div class="jumbotron text-center">
            <h1>Add Item Below</h1>
        </div>
<form name="groceryForm">
    <div class="form-group">
        <input type="text" class="form-control" placeholder ="Grocery Item" ng-model="groceryItem.itemName">
    </div>


    <div class="form-group">
        <button type="button" class="btn btn-success btn lg btn-block" ng-click="save()">
            <span class="glyphicon glyphicon-pushpin"></span>
            Save
        </button>
    </div>


    <div class="form-group">
        <a href="#/" class="btn btn-default btn lg btn-block">
            <span class="glyphicon glyphicon-remove"></span>
            Cancel
        </a>
    </div>
</form>

</div>

在Web服务器上运行index.html后，浏览器中的输出为：

杂货清单

但是，杂货商品清单不会与＆＃34;杂货商品清单＆＃34;

一起显示

各种项目应该显示在同一页面上。

括号是否正确？

请帮助!!!

谢谢!!

Answer 1

您需要定义一个州，以便将杂货列为

 .when("/grocery", {
      templateUrl: "groceryList.html",
      controller: "HomeController"
    })

并将模板更改为

<a class="navbar-brand" href="#grocery">
          <span class="glyphicon glyphicon-apple" style="color: #5bdb46">
          </span> Grocery List
</a>

<强> DEMO

更新AngularJS模块和路由

1 个答案: