idジェネレータのanglejsの実装

Question

私は角度jを使って食料品店のリストを作っていました。私はIDジェネレータを使用してリストにアイテムを追加しようとしていましたが、入力フィールドに入力した最初のアイテムを追加できましたが、入力した別のアイテムを追加できませんでした。

私は外部ライブラリとしてunderscore.jsを使用しています。

私はこのようなエラーを取得しています： エラー：ngRepeat：リピーターに 重複キーをdupesは

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

 

 
    app.config(function($routeProvider){ 
 
     
 
     $routeProvider 
 
     
 
     .when('/',{ 
 
      
 
      templateUrl: "view1.html", 
 
      controller: "groceryctl" 
 
      
 
     }) 
 
     
 
     .when('/additem',{ 
 
      
 
      templateUrl: "view2.html" 
 
     
 
     }) 
 
     
 
     .when('/additem/:id',{ 
 
      
 
      templateUrl: "view2.html" 
 
     
 
     }) 
 
     .otherwise({ 
 
      
 
      redirectTo: '/' 
 
      
 
     }) 
 
    }) 
 

 

 

 
app.factory("Groceryservice", function(){ 
 
    
 
    var groceryservice = []; 
 
    
 
    groceryservice.items = [ 
 
       
 
       {id:1,completed:true,itemName:"Bread",dateMf:"03-05-2017"}, 
 
       {id:2,completed:true,itemName:"Unclechips",dateMf:"07-05-2017"}, 
 
       {id:3,completed:true,itemName:"So-sugarcandy",dateMf:"13-09-2014"}, 
 
       {id:4,completed:true,itemName:"Frestos",dateMf:"23-06-2015"}, 
 
       {id:5,completed:true,itemName:"Mr.john flour",dateMf:"17-04-2017"}, 
 
       {id:6,completed:true,itemName:"Gems",dateMf:"19-07-2015"}, 
 
       {id:7,completed:true,itemName:"Agrade-apples",dateMf:"15-08-2016"}, 
 
       {id:8,completed:true,itemName:"Pepsi",dateMf:"21-09-2017"}, 
 
       {id:9,completed:true,itemName:"Peanut-jam",dateMf:"19-11-2016"}, 
 
       {id:10,completed:true,itemName:"Mushrooms",dateMf:"06-11-2017"} 
 
       
 
      ]; 
 
    
 
     groceryservice.getNewId = function() { 
 
     
 
     if(groceryservice.newId) { 
 
      groceryservice.newId++; 
 
      return groceryservice.newId; 
 
     } 
 
     
 
     else{ 
 
      
 
      var maxId = _.max(groceryservice.items, function(entry){return entry.id;}) 
 
      
 
      groceryservice.newId = maxId.id + 1 ; 
 
      return groceryservice.newId; 
 
      
 
     } 
 
    }; 
 
    
 

 
    groceryservice.save = function(entry){ 
 
     entry.id = groceryservice.getNewId(); 
 
     groceryservice.items.push(entry); 
 
    } 
 
    
 
    return groceryservice; 
 
    
 
}) 
 

 

 
app.controller('groceryctl', ["$scope","$routeParams","$location","Groceryservice",function($scope,$routeParams,$location,Groceryservice){ 
 
    
 
$scope.title="Gstore"; 
 
    
 
$scope.items=Groceryservice.items; 
 
    
 
$scope.additem = { id:11,completed:true,itemName:"",dateMf:new Date() }; 
 
    
 
$scope.save = function(){ 
 
     
 
    Groceryservice.save($scope.additem); 
 
     
 
    $location = ('/'); 
 
     
 
} 
 
    
 
console.log($scope.items); 
 

 
}]) 
 

 

 
app.controller('titlectl', ["$scope","Groceryservice",function($scope,Groceryservice){ 
 
    
 
    $scope.title=Groceryservice.items[0].itemName; 
 
    
 

 
}]);

<div class="col-sm-offset-2 col-sm-8"> 
 
      <ul class="list-group"> 
 
       <li class="list-group-item text-center clearfix" ng-repeat="item in items | orderBy:'-dateMf' "> 
 
       <span class="" style="font-size:18px;font-weight:bold;">{{item.itemName | uppercase}}</span> 
 

 
      </li> 
 
      </ul> 
 
     </div>

Answer 1

dupesエラーは通常発生したときに、重複する項目でng-repeatで見つかった配列を$ trackでこの追加トラックを回避するにはindex：

<li class="list-group-item text-center clearfix" ng-repeat="item in items track by $index | orderBy:'-dateMf' ">