Skip to content

Instantly share code, notes, and snippets.

@kalbarczyk

kalbarczyk/ngCut.html

Created November 18, 2014 13:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kalbarczyk/cc95c46df06b7d8ba904 to your computer and use it in GitHub Desktop.
Save kalbarczyk/cc95c46df06b7d8ba904 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS - dyrektywa ngCut - przykład z naszej książki „AngularJS - Pierwsze kroki”, która ukaże się na początku 2015r. dzięki wydawnictwu Helion.
Raw
ngCut.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
<head>
<title>ngCut</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 data-ng-repeat="mountain in mountainsList">
<textarea data-ng-cut="cut=true" data-ng-focus="f=true">{{$index+1}}. {{mountain.mountain}} - {{mountain.metres}}</textarea>
<div class="text-danger" data-ng-show="cut">
Uwaga część tekstu <b>"{{mountain.mountain}} - {{mountain.metres}}"</b> o ID={{$index}} została wycięta!
</div>
<div class="text-success" data-ng-show="f">
Jesteś wewnątrz elementu o ID={{$index}}!
</div>
</div>
<div ng-init="checked=true">
<a hreh="#" ng-click="checked=false"> Ukryj </a>
<a hreh="#" ng-click="checked=true"> Pokaż </a>
<span ng-if="checked"> Text </span>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.1/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('defaultCtrl', function ($scope) {
// $scope.checked = true;
$scope.cut = false;
$scope.f = false;
$scope.mountainsList = [
{ mountain: "Mount Everest", metres: 8850},
{ mountain: "K2", metres: 8611},
{ mountain: "Kangczendzonga", metres: 8598},
{ mountain: "Lhotse", metres: 8501},
{ mountain: "Makalu", metres: 8463},
{ mountain: "Cho Oyu", metres: 8201}];
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment