javascript - 将计算值传递给ng-model

我是AngularJS的新手，正在尝试建立一个简单的Orders表单。我在将id值传递给控制器​​时遇到问题。我希望它是最后一个订单ID + 1，因此它充当标识字段。理想情况下，我希望将其隐藏起来，但是如果我能使此部分正常工作，那将会有所帮助。

这是我尝试过的：

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列中没有任何显示。任何意见，将不胜感激。

最佳答案

由于$ scope保留所有现有订单，因此您无需传递新的ID。添加新订单时，只需在控制器中进行计算即可。

从视图中删除此行

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

在控制器中

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