2016-04-10 26 views
1

AngularJS'de yeniyim ve basit Siparişler formu oluşturmaya çalışıyorum. Kimlik değerini denetleyiciye iletirken sorun yaşıyorum. Son sipariş kimliği + 1 olmasını istiyorum, böylece bir kimlik alanı gibi davranıyor. İdeal olarak gizlenmesini isterdim, ama bu kısmı işe yarayacak olursam yardım edebilirim. İşteHesaplanan değeri ng-modeline geçirme

denedim budur:

HTML:

<div ng-controller = "OrdersCtrl"> 
    <h1>Orders</h1> 

    <form class="form-inline" ng-submit="addOrder()"> 
    <strong>Add order: </strong> 

    <input value="{{orders[orders.length - 1].id + 1 }}" ng-model="newOrder.id" > 
    <input type="number" step="0.01" class="form-control" placeholder="Total" ng-model="newOrder.total"> 
    <input type="number" class="form-control" ng-model="newOrder.product_id"> 
    <input type="submit" value="+" class="btn btn-success"> 
    </form> 

    <table class="table table-hover"> 
    <thead> 
     <td>Order ID</td> 
     <td>Total</td> 
     <td>Product</td> 
     <td></td> 
    </thead> 
    <tr ng-repeat="order in orders | orderBy: '-id':reverse"> 
     <td> 
     {{order.id}} 
     </td> 
     <td> 
     <strong>{{order.total | currency}}</strong> 
     </td> 
     <td> 
     {{order.product_id}} 
     <small ng-show="order.user_id"><br>-{{order.user_id}}</small> 
     </td> 
     <td> 
     <button ng-click="deleteOrder(order)" class="btn btn-danger btn-sm"><span class="gylphicon glyphicon-trash" aria-hidden="true"></span></button> 
     </td> 
    </tr> 
    </table> 
</div> 

JS:

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

$(document).on('ready page:load', function() { 
    angular.bootstrap(document.body, ['shop']) 
}); 

app.controller('OrdersCtrl', ['$scope', function($scope){ 
    $scope.orders = [ 
    {id: 1, total: 55, product_id: 5, user_id: 1}, 
    {id: 2, total: 33, product_id: 3, user_id: 1}, 
    {id: 3, total: 51, product_id: 12, user_id: 1} 
    ]; 
    $scope.addOrder = function(){ 
    if(!$scope.newOrder.product_id || $scope.newOrder.total === ''){return;} 
    $scope.orders.push($scope.newOrder); 
    }; 
    $scope.delOrder = function(order){ 
    $scope.orders.splice($scope.orders.indexOf(order), 1); 
    }; 
}]); 

Ben herhangi bir hata almıyorum ama hiçbir şey kimliği sütununda görünmektedir. Herhangi bir tavsiye takdir edilecektir.

cevap

2

$ kapsam, mevcut tüm siparişleri koruduğundan, yeni bir kimlikte geçmeniz gerekmemelidir. Sadece yeni bir sipariş eklerken kontrol cihazında hesaplayın.

kaldır kontrolörü olarak görünümü

<input value="{{orders[orders.length - 1].id + 1 }}" ng-model="newOrder.id" > 

sonra bu satır

$scope.newOrder = {}; 

$scope.addOrder = function(){ 
    if($scope.newOrder.total === ''){ return; } 
    $scope.newOrder.id = $scope.orders[$scope.orders.length - 1].id + 1 
    $scope.orders.push($scope.newOrder); 
    $scope.newOrder = {}; 
}; 
+0

Teşekkürler, ben bu sefer başım etrafında büyük patlama. Bu çok daha mantıklı. Çok müteşekkirim! – JJ32

İlgili konular