提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[AngularJS] angular.copy()

Angular angularjs copy
2023-09-14 09:00:56 时间 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>Egghead Videos</title>
    <link rel="stylesheet" href="./topcoat-desktop-light.min.css">
    <link rel="stylesheet" href="./bootstrap-theme.min.css">
    <link rel="stylesheet" href="./bootstrap.min.css">
    <script type="text/javascript" src="./angular.min.js"></script>
    <script type="text/javascript" src="./angular-animate.min.js"></script>
    <script type="text/javascript" src="./app.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/TweenMax.min.js"></script>
</head>
<body ng-app="app" ng-controller="AppCtrl">

<form>
    <input type="text" ng-model="copyContact.firstName" />
    <button ng-click="saveContact()">Save</button>
</form>

<div class="div" style="margin-top: 40px;"></div>

<table class="table table-striped">
    <thead>
    <tr>
        <td>First</td>
        <td>Last</td>
        <td>Phone</td>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="contact in contacts" ng-click="selectContact(contact)">
        <td>{{contact.firstName}}</td>
        <td>{{contact.lastName}}</td>
        <td>{{contact.phone}}</td>
    </tr>
    </tbody>
</table>
</body>
</html>

 

var app = angular.module("app", []);
app.factory('Contacts',function($http){
    return{
       fetchContacts: function(callback){$http.get('./contacts.json').success(callback)}
    }
})

app.controller('AppCtrl', function($scope, Contacts){

    $scope.selectedContact = null;
    $scope.copyContact = null;
    Contacts.fetchContacts(function(Contacts){
        $scope.contacts = Contacts;
    });

    $scope.selectContact = function(contact){
        $scope.selectedContact = contact;
        $scope.copyContact = angular.copy($scope.selectedContact);
    }

    $scope.saveContact = function(){
        $scope.selectedContact.firstName = $scope.copyContact.firstName;
    }
});

 

相关文章