Memo of the day
👍 👎 soso {{typing_header}}
rate this memo: Thumb up Thumb down so soMy Motto
- {{x}}
characters left:
error: empty or exceed max char<style>
.my_motto.ng-invalid {
background-color: pink;
}
.my_motto.ng-valid {
background-color: lightgreen;
}
.my_error{
color:red;
}
</style>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div id="myApp1" ng-app="myApp1" ng-controller="myCtrl1">
<h2>Memo of the day</h2>
<h3 ng-init="typing_header='->'">
<span ng-switch="rating_radio">
<span ng-switch-when="up">👍</span>
<span ng-switch-when="down">👎</span>
<span ng-switch-when="soso">soso</span>
</span>
{{typing_header}}
</h3>
rate this memo:
<input type="radio" ng-model="rating_radio" value="up" />Thumb up
<input type="radio" ng-model="rating_radio" value="down" />Thumb down
<input type="radio" ng-model="rating_radio" value="soso" />so so
<h2>My Motto</h2>
<ol>
<li ng-repeat="x in mottos track by $index">
{{x}}
<button ng-click="remove_motto($index)">×</button>
</li>
</ol>
<form name="my_form">
<textarea name="my_motto" class="my_motto" ng-model="my_motto"
rows="3" cols="50" ng-init="my_motto='enter motto'" required check-validity></textarea>
</form>
<p>characters left: <span ng-bind="char_left()"></span></p>
<span class="my_error" ng-show="!my_form.my_motto.$valid">error: empty or exceed max char</span><br/>
<button ng-click="clear_motto()">clear</button>
<button ng-click="add_motto()" ng-disabled="!my_form.my_motto.$valid">add</button>
<!--When naming a directive, you must use a camel case name, w3TestDirective, but when invoking it, you must use - separated name, w3-test-directive:-->
<test-directive></test-directive>
</div>
<script type="text/javascript">
var memo = "wherever you are, remember to have fun and stay awsome!"
var memo_words = memo.split(' ');
var app = angular.module('myApp1', []);
app.controller('myCtrl1', function ($scope, $interval) {
var i = 0, n = 0;
var start_interval = $interval(function () {
$scope.typing_header = $scope.typing_header + memo_words[i] + " ";
i++;
if (i > memo_words.length) {
i = 0;
n++;
if (n == 2) { $interval.cancel(start_interval); $scope.typing_header = memo; }
else {
$scope.typing_header = "->";
}
}
}, 500);
$scope.char_left = function () {
return 50 - $scope.my_motto.length;
};
$scope.clear_motto = function () {
$scope.my_motto = "";
};
$scope.mottos = [];
$scope.add_motto = function () {
$scope.mottos.push($scope.my_motto);
$scope.my_motto = "enter motto";
}
$scope.remove_motto = function (x) {
$scope.mottos.splice(x, 1);
}
});
app.directive('checkValidity', function () {
return {
require: 'ngModel',
link: function (scope, element, attr, mCtrl) {
function check_length(value) {
if (value.length <= 50) {
mCtrl.$setValidity('check_length1', true);
} else {
mCtrl.$setValidity('check_length1', false);
}
return value;
}
mCtrl.$parsers.push(check_length);
}
};
});
app.directive("testDirective", function () {
return {
template: "<p>made by a directive!<p>"
};
});
angular.bootstrap(document.getElementById("myApp1"), ['myApp1']);
</script>
</body>
reference:
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_model_css
https://www.w3schools.com/angular/angular_examples.asp
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_model_css
https://www.w3schools.com/angular/angular_services.asp
https://docs.angularjs.org/error/ngRepeat/dupes
No comments:
Post a Comment