實現id生成器angularjs

我正在使用角js在雜貨店列表上工作。我試圖添加一個項目到列表使用ID生成器我能夠添加第一個項目，當輸入字段中輸入，但我無法添加另一個隨機輸入的項目。實現id生成器angularjs

我使用underscore.js作爲外部庫。

我得到這樣的錯誤： 錯誤：ngRepeat：愚弄重複鍵在直放站

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>

來源

2017-08-16 manoj

如果您可以共享正在運行的代碼段以幫助您獲得解決方案，那將會更好。 –

«這裏是代碼»... –

的受騙者錯誤通常發生時重複項在ng-repeat遇到的數組中，爲了避開這個由$ index添加的軌道：

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

來源

2017-08-16 15:58:00

謝謝，我已經嘗試過的代碼，但事情是當我添加第二個項目時說稻米第一個項目被添加也正在更新爲米 – manoj

其實我沒有提到視圖中的控制器。無論如何，我得到了結果，謝謝 – manoj

實現id生成器angularjs

回答

相關問題