Question

我正在尝试将表单添加到bootstrap手风琴并发布文本值。没有手风琴，表格可以正常工作。当我将表格添加到手风琴时，我无法将文本框值传递给angularjs控制器。基本上我无法执行CRUD操作，因为我无法传递值。与问题相关的最低代码。

main.html中

<div ng-controller="myController">
<accordion class="accordion" close-others="oneAtATime">
        <accordion-group  ng-repeat="group in groups" is-open="status.isOpen[$index]" >
            <accordion-heading>
                {{group.groupTitle}} <i class="fa chevron-icon" ng-class="{'fa-chevron-down': status.isOpen[$index], 'fa-chevron-right': !status.isOpen[$index]}"></i>
            </accordion-heading>
            <div ng-include="group.templateUrl"></div>
        </accordion-group>
    </accordion>
</div>

controller.js

App.controller('myController', ['$scope', 'Parts', function($scope, Parts) {
var original = $scope.parts;

$scope.submit = function() {
if ($scope.parts.a_id == null) {
$scope.createNewPart();
} else {
$scope.updatePart();
}
};
$scope.createNewPart = function() {
Parts.resource1.create($scope.parts);
};
$scope.updatePart = function() {
Parts.resource2.update($scope.parts)
};
$scope.oneAtATime = true;

                $scope.groups = [{
                    groupTitle: "ADD 1",
                    templateUrl: "file1.html"
                }, {
                    groupTitle: "ADD 2",
                    templateUrl: "file2.html"
                }];

                $scope.status = {
                    isOpen: new Array($scope.groups.length)
                };

                for (var i = 0; i < $scope.status.isOpen.length; i++) {
                    $scope.status.isOpen[i] = (i === 0);
                }

} ]);

的file1.html

            <div>
            <form name="myForm" ng-submit="submit()">
            <div class="row">
            <label class="col-md-2 control-lable" for="part">Add1</label>

            <input type="text" ng-model="parts.part" id="part" required />

            </div>
            <div class="row">

            <input type="submit" value="{{!parts.id ? 'Add' : 'Update'}}" ng-disabled="myForm.$invalid">

            </div>
            </form>

//inside table
        <tr ng-repeat="a in availableparts > 
    <td>{{a.id}}</td> 
    <td>{{a.apart}}</td> 
    <td><button type="button" ng-click="editPart(a.id)" >Edit</button> 
    <button type="button" ng-click="deletePart(a.id)">Remove</button> 
    </td> 
    </tr>
    </div>

Answer 1

最初，您需要将$scope.parts设置为空对象{}，因此当您访问$scope.parts.id时，您将null，而不是错误地说id undefined

Angularjs不能用手风琴进行粗暴操作

1 个答案: