計算値をng-modelに渡す

Question

私はAngularJSを初めて使用しており、簡単な注文フォームを設定しようとしています。 id値をコントローラに渡すときに問題が発生しています。最後の注文ID + 1になりたいので、IDフィールドとして機能します。理想的には私はそれを隠したいと思っていますが、もし私がちょうど助けてくれるこの部分を働かせることができれば。ここで

は、私が試したものです：

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

私はすべてのエラーが届かないが、何もid列に表示されていません。アドバイスをいただければ幸いです。

Answer 1

$ scopeは既存の注文をすべて保持するので、新しいIDを渡す必要はありません。新しい注文を追加するときにコントローラで計算してください。

はおかげで、私はこの1つに私の頭の周りを叩いたビューコントローラ

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