Skip to content

Instantly share code, notes, and snippets.

@kalbarczyk

kalbarczyk/angular.copy.html

Created November 18, 2014 14:03
Show Gist options
  • Save kalbarczyk/24c0c34ced72f36738a1 to your computer and use it in GitHub Desktop.
Save kalbarczyk/24c0c34ced72f36738a1 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS - funkcja copy - przykład z naszej książki „AngularJS - Pierwsze kroki”, która ukaże się na początku 2015r. dzięki wydawnictwu Helion.
Raw
angular.copy.html
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title>AngularJS - funkcje - angular.copy</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
</head>
<body data-ng-controller="defaultCtrl">
<div class="container">
<div>
<table class="table" data-ng-init="showButton=false">
<thead>
<tr>
<th>Nazwa zmieniana automatycznie</th>
<th>Zmień nazwę</th>
</tr>
</thead>
<tr data-ng-repeat="mountain in mountainsList track by $index">
<td class="col-lg-6">{{mountain}}</td>
<td class="col-lg-6">
<input data-ng-model="mountain" data-ng-change="showButton=true" />
<button class="btn btn-danger" data-ng-show="showButton" data-ng-click="save($index, mountain); showButton=false">Zmień</button></td>
</tr>
</table>
</div>
<h4>Dane po zapisie</h4>
<div class="well">
<ul>
<li data-ng-repeat="mountain in changeMountainsList track by $index">{{mountain}}
</li>
</ul>
</div>
<h4>Dane wejściowe</h4>
<div class="well">
<ul>
<li data-ng-repeat="mountain in masterMountainsList track by $index">{{mountain}}
</li>
</ul>
</div>
</div>
<script src="https://code.angularjs.org/1.3.0/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller("defaultCtrl", function ($scope, mountainsList) {
$scope.mountainsList = mountainsList;
$scope.masterMountainsList = angular.copy($scope.mountainsList);
$scope.changeMountainsList = angular.copy($scope.mountainsList);
$scope.save = function (index, newName) {
$scope.changeMountainsList[index] = newName
};
});
app.factory('mountainsList', function () {
return ["Mount Everest", "K2", "Kangczendzonga", "Lhotse"];
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment