Question

我是Angular JS的新手，我正在尝试实现一个页面来显示，添加，编辑和删除REST API中的对象。我有添加，编辑和删除绑定到ng-click的项目的功能，但编辑和删除事件不会触发。添加和编辑/删除绑定之间的唯一区别似乎是编辑/删除ng-click位于ng-repeat内。

JavaScript代码：

process_errors = function(rejection) {
    // Error processing code
}

var exampleApp = angular.module('exampleApp', ['ngResource']);

exampleApp.factory('Example', ['$resource', function($resource) {
    return $resource('/api/v1/example/:example_id', {example_id:'@id'});
}]);
exampleApp.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.headers.common['X-CSRFToken'] = $.cookie('csrftoken');
}]);

exampleApp.controller('exampleListCtrl', ['$scope', 'Example',
function($scope, Example) {
    $scope.examples = Example.query();
    $scope.newExample = new Example();
    $scope.add = function() {
        $scope.newExample.$save().then(function(result){
            $scope.examples.push(result);
        }).then(function() {
            $scope.newExample = new Example();
        }, process_errors);
    }
    $scope.editExample = function(example) {
        console.log('editing');
        var idx = $scope.examples.indexOf(example);
        $scope.examples[idx].$save().then(function(result) {
        }, function(rejection) {
            process_errors(rejection);
            $scope.editMode = true;
        });
    }
    $scope.deleteExample = function(example) {
        console.log('deletion');
        example.$delete().then(function(){
            var idx = $scope.examples.indexOf(example);
            $scope.examples.splice(idx, 1);
        });
    }
}]);

HTML：

<div id="content-container" ng-app="exampleApp">
    <table class="table table-striped" ng-controller="exampleListCtrl">
        <thead>
            <!-- Table headers -->
        </thead>
        <tbody>
            <tr>
                <form class="form-inline" role="form">
                    <td><input type="text" class="form-control" ng-model="newExample.start_date" placeholder="2013-11-25"></input></td>
                    <!-- more fields in the same format -->
                    <td><button class="btn btn-primary" ng-click="add()">Add</button></td>
                </form>
            </tr>
        </tbody>
        <tbody>
            <tr ng-repeat="example in examples">
                <form class="form-inline" role="form">
                    <td>
                        <span ng-hide="editMode">{{example.start_date}}</span>
                        <input ng-show="editMode" type="text" class="form-control" ng-model="example.start_date" value="{{example.start_date}}"></input>
                    </td>
                    <!-- more fields in the same format -->
                    <td>
                        <button ng-hide='editMode' class="btn btn-default" ng-click="editMode = true;">Edit</button>
                        <button ng-show='editMode' class="btn btn-primary" ng-click="editExample(example); editMode = false">Save</button>
                    </td>
                    <td><button class="btn btn-danger" ng-click="deleteExample(example)"><span class="glyphicon glyphicon-remove"></span></td>
                </form>
            </tr>
        <tbody>
    </table>
</div>

我也尝试将函数绑定到$parent.editExample(example)。

Angular.js ng-click事件未触发

0 个答案: