当使用ng-repeat并进行push操作时出现错误

Question

我有一个关于Angular的问题，这是我的代码。

HTML

<div class="row">
<div class="col-sm-12">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Insertar presupuesto</h3>
        </div>
        <div class="panel-body">
            <!-- Trigger the modal with a button -->
            <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#seleccionarp">Buscar producto</button>
            <!-- Modal -->
            <div id="seleccionarp" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Seleccione su producto</h4>
                        </div>
                        <div class="modal-body">
                            <label for="Buscar cliente  ">Buscar producto:</label>
                            <input class="form-control" id="buscarproducto" ng-model="busqueda[queryBy]" value="" placeholder="Buscar" />
                            <div>
                                <table class="table table-hover">
                                    <tr>
                                        <th>Descripcion</th>
                                        <th>Color</th>
                                        <th>Talle</th>
                                        <th>Stock</th>
                                        <th>Precio</th>
                                    </tr>
                                    <tbody ng-repeat="emp in posts | filter:busqueda">
                                        <tr ng-click="comprar(emp)" data-dismiss="modal">
                                            <td>{{emp.nombre_producto}}</td>
                                            <td>{{emp.color}}</td>
                                            <td>{{emp.talle}}</td>
                                            <td>{{emp.stock}}</td>
                                            <td>{{emp.precio | currency}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                        </div>
                    </div>
                </div>
            </div>
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Nombre del producto</th>
                        <th>Cantidad</th>
                        <th>Precio</th>
                        <th>Total</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody ng-repeat="p in carrito track by $index">
                    <input type="hidden" name="id_producto[]" value="{{p.id_producto}}" ng-model="p.id_producto" class="form-control">
                    <input type="hidden" name="color[]" value="{{p.color}}" ng-model="p.color" class="form-control">
                    <input type="hidden" name="talle[]" value="{{p.talle}}" ng-model="p.talle" class="form-control">
                    <tr>
                        <td>
                            <input type="text" name="nombre_producto[]" ng-model="p.nombre_producto" class="form-control">
                        </td>
                        <td>
                            <input type="number" name="stock[]" ng-model="p.stock" value="1" onClick="this.select();" class="form-control">
                        </td>
                        <td>
                            <input type="text" name="precio[]" ng-model="p.precio" onClick="this.select();" class="form-control" value="">
                        </td>
                        <td>{{p.stock * p.precio | currency}}</td>
                        <td>
                            <button type="button" class="btn btn-danger" ng-click="remove($index)">Eliminar</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <h2>Total:${{total()}}</h2>
            <input type="hidden" name="total_remito" value="{{total()}}">
            <button type="submit" name="button">guardar</button>
        </div>
    </div>
</div>

AngularJS

app.controller("ctrlremitos", function($scope, $http) {

$scope.posts = [];

$scope.carrito = [];

$scope.clienteasignado = [];

$scope.clientes = [];

$scope.busqueda = {}

$scope.busquedaclientes = {}

$scope.queryBy = '$'

$scope.newPost = {};

$http.get(base_url + "venta/get_productos").success(function(data, timeout) {
    $scope.posts = data;
}).error(function(err) {})

$http.get(base_url + "venta/get_clientes").success(function(data) {
    $scope.clientes = data;
}).error(function(err) {})

$scope.comprar = function(_item, index) {
    $scope.carrito.push(_item)
}

$scope.asignarcliente = function(_item) {
    $scope.clienteasignado.push(_item)
}

$scope.remove = function(index) {
        $scope.carrito.splice(index, 1);
    },

    $scope.total = function() {
        var total = 0;
        angular.forEach($scope.carrito, function(p) {
            total += p.stock * p.precio;
        })
        return total;
    }

});

问题是当我选择一个产品时，按下按钮但值总是库存的值，我想要的是当你按下按钮时，总是将库存值改变1个。另一件事我注意到的是，当更改“库存”字段中的值时，也会在搜索产品的数组中更改，我不知道该怎么办:(我已经尝试让这个正确工作很多天了，希望他们能为我指引方向。

问候

https://github.com/outthesystem/facturacion-codeigniter

- Jet Market

Answer 1

"$scope.total"是一个函数，而不是作用域变量。 因此，除非您进行显式调用，否则双向绑定在这种情况下将无法工作。 要使其正常工作： 在控制器和HTML上进行以下更改。 控制器更改：

$scope.total = 0;

$scope.comprar = function(_item, index) {
    $scope.carrito.push(_item);
    $scope.calculateTotal(); //Make an explicit call to calculation method
}

$scope.calculateTotal = function()
{
     angular.forEach($scope.carrito, function(p) {
            $scope.total += p.stock * p.precio;
        })
};

HTML更改：

<h2>Total:${{total}}</h2>
            <input type="hidden" name="total_remito" value="{{total}}">

希望这有所帮助。

- Kalyan

---

谢谢您的帮助，但我觉得我没有让自己被理解，我附上了一张图片来展示发生了什么。 - Jet Market

Answer 2

我看到你的 HTML 页面中不是英文，但是无论如何，如果我理解正确，你的问题在于你正在尝试推送一个实际上不存在于你的 DOM 中的东西。

$scope.asignarcliente = function(_item) {
$scope.clienteasignado.push(_item)
}

什么是$scope.clienteasignado？实际显示的列表名为$scope.posts，用于产品。如果我错了，请纠正我。所以如果那是要推送产品的产品列表，你需要这样写。

$scope.asignarcliente = function() {
$scope.posts.push(emp);
}    

提示：这个函数也不会在 DOM 中被调用，你只是定义了一个按钮。

<button type="submit" ng-click="asignarcliente()" class="btn btn-default" data-dismiss="modal">Cerrar</button>

我希望我正确操作了所需项目，同时也希望这对你有用。

- Kamel Mili

---

谢谢您的帮助，但我觉得我没有让自己被理解，我附上了一张图片来展示发生了什么。 - Jet Market

是为了其他推送，客户端被选中。 - Jet Market

Answer 3

我明白了。我的问题在于双向绑定。请注意，如果您在给定变量中使用 "::" 表达式，则只进行单向绑定，然后在 "stock" 字段中使用值为 1 的 ng-init。

https://github.com/outthesystem/facturacion-codeigniter/commit/5c4e8737d0e0b1732ba127e60fb46f1065344e03

- Jet Market