Question

我正在寻找一个书架应用程序，它使用角度路由添加，删除，编辑书架数据。

但是当我尝试预先填充记录进行编辑时，我无法获得预先填充的值。

我尝试使用$scope.{model name}分配值。但它无法正常工作

App.js

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

myApp.config(['$routeProvider', function($routeProvider) {

    $routeProvider.when('/viewBook',
                        { template : '<div ng-controller="ViewBookController"> <h2>Books</h2> <table class="table table-bordered table-condensed"> <thead> <tr> <td>Name</td> <td>Category</td> <td>Price</td> <td>Actions</td> </tr> </thead> <tr ng-repeat ="book in books"> <td>{{book.name}}</td> <td>{{book.category}}</td> <td>{{book.price}}</td> <td><a href="#/addBook" ng-click="edit(addBook,book.id)"><span class="glyphicon glyphicon-edit">Edit</span></a> | <a href="#" ng-click="delete(book.id)"><span class="glyphicon glyphicon-trash">Delete</span></a> </td> </tr> </table> </div>',
                          controller : 'ViewBookController'}).
                   when('/addBook', 
                        { template : '<div ng-controller = "ViewBookController"> <form class="well"> <label>Name*</label> <input type="text" name="name" ng-model="addBook.name" /><br/> <label>Category*</label> <input type="text" name="email" ng-model="addBook.category" /><br/> <label>Price*</label> <input type="text" name="phone" ng-model="addBook.price" /><br/> <br/> <input type="hidden" ng-model="addBook.id"/> <button ng-click ="add(addBook)"><a href="#/viewBook">Add </button> <button type="button" class="btn btn-danger"><a href="#/viewBook">Cancel</a></button> </form> </div> ',
                          controller : 'ViewBookController'}).
                   otherwise({redirectTo: '/viewBook'});       

}]);

myApp.controller('ViewBookController', function($scope, ViewBookService) {   
     $scope.tempbook ="";  
    $scope.books = ViewBookService.list();
    $scope.delete = function (id) {
        ViewBookService.delete(id);
      //  if ($scope.addBook.id == id) 
      //  $scope.addBook = {};
    }

    $scope.add = function() {
        ViewBookService.save($scope.addBook);
        $scope.addBook = {};
        alert('book added successfully');
    }
     $scope.edit = function (addBook,id) {

          //$scope.addbook = $scope.tempbook; 

$scope.addBook= (angular.copy(ViewBookService.get(id)));


    }


});

myApp.service('ViewBookService', function() {
    //to create unique book id
    var uid = 3;

    //books array to hold list of all books

    var books = [{
            id : 0,
            name : 'Java',
            category : 'software',
            price : 600,
    },
    {
            id : 1,
            name : 'Sherlock Holmes',
            category : 'fiction',
            price : 350,
    },
    {
            id : 2,
            name : 'Wings of Fire',
            category : 'autobiography',
            price : 250,
    }];
//save method create a new book if doesnt exist else update the existing object
    this.save = function(book) {
        if(book.id == null) {
            book.id =uid++;
            books.push(book)
        }
        else {
            for(i in books) {
                if(books[i].id == book.id) {
                    books[i] ==book;
                }
            }
        }
    }

 //simply search books list for given id and returns the book object if found
    this.get = function(id) {
        for(i in books) {
            if( books[i].id == id) {
                return books[i];
            }
        }
    }

 //iterate through books list and delete book if found
    this.delete = function (id) {
        for (i in books) {
            if (books[i].id == id) {
                books.splice(i, 1);
            }
        }
    }

 //simply returns the books list
    this.list = function () {
        return books;
    }
});

的index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Hello AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
    <div class="container">
        <div class="col">
        <div class="col-md-3">
            <ul class="nav">
                <li><a href="#viewBook"> View Book </a></li>
                <li><a href="#addBook"> Add Book </a></li>
            </ul>
        </div>
        <div class="col-md-9">
            <div ng-view></div>
        </div>
        </div>
    </div>       

</body>
</html>

Angular Js在事件无效时更新视图

0 个答案: