Übergeben berechneten Wert an ng-Modell

Question

Ich bin neu in AngularJS und versuche, eine einfache Bestellungen Formular einzurichten. Ich habe Probleme, den ID-Wert an den Controller zu übergeben. Ich möchte, dass es die letzte Bestell-ID + 1 ist, so dass es als Identitätsfeld fungiert. Im Idealfall möchte ich, dass es versteckt wird, aber wenn ich nur diesen Teil arbeiten könnte, würde das helfen.

Hier ist, was ich versucht habe:

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); 
    }; 
}]); 

ich keine Fehler bekommen, aber nichts ist in der Spalte id erscheinen. Jeder Rat würde geschätzt werden.

Answer 1

Da $ scope alle vorhandenen Bestellungen beibehält, sollten Sie keine neue ID eingeben müssen. Berechne es einfach im Controller, wenn du einen neuen Auftrag hinzufügst.

Entfernen Sie diese Zeile aus der Sicht

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

In Controller

$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 = {}; 
};