Question

我很抱歉，但我对Angular很新，我甚至不确定如何提问。我的最终目标是建立一个自行车商店“网站”，用户可以在其中编辑自行车。此外，他们可以为自行车添加配件。目前一切正常，除非我试图添加新的配件。

如果您使用ng-click =“store.appendAcc（）”查看按钮并尝试单击，它将无法在新的自行车上运行。它只适用于我将自行车信息手动添加到self.products中，或者如果我使用类“add-parts”删除div中的ng-repeat。我很感激帮助！

html：

<div class="name">

    <form>

        <div ng-show="store.showPromo" class="showing">
            <div class="promo-showing" ng-repeat="bike in store.products">
                <div class="promo-bikes">
                    <p>{{bike.name}}</p>
                    <p>{{bike.price}}</p>
                    <div ng-repeat="accessory in bike.accessories" class="accesories">
                        <p>{{accessory.name}}</p>
                        <p>{{accessory.price}}</p>
                    </div>
                </div>
            </div>
            <button ng-click="store.switchToEdit()">Edit</button>   
        </div>

        <div ng-show="!store.showPromo" class="editing">
            <div ng-repeat="bike in store.products">
                <input ng-model="bike.name">
                <input ng-model="bike.price">
                <button ng-click="store.appendAcc()">add accessories</button>
                <div ng-show="store.showAcc" ng-repeat="accessory in bike.accessories" class="add-parts">
                    <input class="accessory-input" ng-model="accessory.name">
                    <input class="accessory-input" ng-model="accessory.price">
                    <button ng-click="store.hideAcc()">submit accessories</button>
                </div>      
            </div>  
            <button ng-click="store.newBike()" type="submit">Create New</button>
            <button ng-click="store.switchToPromo()">See Promo Screen</button>
        </div>      

    </form>



</div>

JS：

(function() {

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

    app.controller('storeCtrl', function() {

        var self = this;

        self.showPromo;
        self.showAcc;

        self.products = [
        {
            name: 'bike',
            price: '$$$',
            accessories: [{
                name: 'handles',
                price: 99
            }, {
                name: 'seat',
                price: 60
            }]
        }
        ];

        self.newBike = function(named, priced, partName, partPrice) {
            self.products.push({
                name: named || 'edit bike',
                price: priced || 'edit price',
            });
        }

        self.switchToPromo = function () {
            self.showPromo = 'on';
            // for (var i = self.parts.length - 1; i >= 0; i--) {
            //  console.log(self.parts[i])
            //  document.querySelector('.promo-bikes').appendChild(self.parts[i])
            // };
        }

        self.switchToEdit = function () {
            self.showPromo = undefined;
        }

        self.appendAcc = function () {
            self.showAcc = 'on';
        }

        self.hideAcc = function (named, priced) {
            self.showAcc = undefined;
        }

    })

})();

Answer 1

我从未见过有人像你在Angular那样使用this。我总是使用$scope但你必须将它注入你的控制器。您添加到$scope的所有属性都可在视图中使用。

app.controller('storeCtrl', ['$scope', function($scope)
{
    $scope.showPromo = false;
    $scope.showAcc = false;

    ...

    $scope.appendAcc = function () {
        $scope.showAcc = 'on';
    }
}

您还需要直接从store中删除$scope视图中的<div ng-show="!showPromo" class="editing"> <div ng-repeat="bike in products"> <input ng-model="bike.name"> <input ng-model="bike.price"> <button ng-click="appendAcc()">add accessories</button> <div ng-show="showAcc" ng-repeat="accessory in bike.accessories" class="add-parts"> <input class="accessory-input" ng-model="accessory.name"> <input class="accessory-input" ng-model="accessory.price"> <button ng-click="hideAcc()">submit accessories</button> </div> </div> <button ng-click="newBike()" type="submit">Create New</button> <button ng-click="switchToPromo()">See Promo Screen</button> </div>前缀：

{{1}}

另外，在没有看到其余代码的情况下，我不确定为什么要将代码包装在闭包中。我不相信这是必要的，并可能导致问题。

Answer 2

我认为当你创造一个新的自行车时，配件可能是未定义的，因此在ng-repeat中没有任何“重复”。我建议用

初始化一辆新自行车

self.newBike = function(named, priced, partName, partPrice) {
        self.products.push({
            name: named || 'edit bike',
            price: priced || 'edit price',
            accessories: [{
                name:  partName || 'add part',
                price: partPrice || 'add price'
            }]
        });
    }

使用AngularJS处理嵌套的ng-repeat。无法通过单击按钮获取按钮

2 个答案: