I want to make input like that: I am Programer, but if i will type wrong letter it will automatically erase it, or will not allow me to type that letter.
I have tried this kinda code: index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>I AM Programmer</title>
</head>
<body ng-app="myApp">
<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>
<!-- <h1>{{myForm.myInput.$valid}}</h1>
-->
</html>
script.js
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
return {
require: 'ngModel',
link: function(scope, element, attr, mCtrl) {
function myValidation(value) {
if (value.indexOf("I am Programmer") > -1) {
mCtrl.$setValidity('charE', true);
} else {
mCtrl.$setValidity('charE', false);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
};
});
style.css
body{
background-color: #fbfbfb;
}
input.ng-invalid {
border:2px solid #EA4335;
}
input.ng-valid {
background-color:lightgreen;
}
input{
width:800px;
height:60px;
text-align: center;
font-size: 30px
}
I think this is what you want
html
<input name="myInput" valid-ng-model="myInput" data-ng-trim="false" required my-directive>
script.js
var app = angular.module('myApp', []);
app.directive('myDirective', function ($parse) {
"use strict";
return {
require: 'ngModel',
restrict: "A",
link: function (scope, element, attr, mCtrl) {
function myValidation(value) {
if ("I am Programmer".toLowerCase().indexOf(value.toLowerCase()) === 0) {
mCtrl.$setValidity('charE', true);
return value;
} else {
mCtrl.$setViewValue(scope.myInput);
mCtrl.$render();
mCtrl.$setValidity('charE', false);
}
}
mCtrl.$parsers.push(myValidation);
}
};
});
app.directive('validNgModel', function ($compile, $parse) {
return {
terminal: true,
priority: 1000,
scope: true,
link: function link(scope, element, attrs) {
var parsedNgModel = $parse(attrs.validNgModel);
scope.$$customNgModel = angular.copy(parsedNgModel(scope));
element.attr('ng-model', '$$customNgModel');
element.removeAttr('valid-ng-model');
var compiledElement = $compile(element)(scope);
var ngModelCtrl = compiledElement.controller('ngModel');
scope.$watch('$$customNgModel', function (newModelValue) {
if (ngModelCtrl.$valid || ngModelCtrl.$error.required) {
parsedNgModel.assign(scope.$parent, newModelValue);
}
});
}
};
});
JSFiddle
You can use $validators. Below is the sample, inline with your example.
angular.module("myApp", [])
.controller('ctrl', function($scope) {})
.directive('myDirective', function() {
return {
require: 'ngModel',
link: function(scope, element, attr, mCtrl) {
mCtrl.$validators.strictCheck = function(modelVal) {
var regex = /^I am Programmer$/;
if (regex.test(modelVal)) {
return true;
} else {
return false;
}
}
}
};
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="ctrl">
<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
<span ng-if="myForm.myInput.$error.required">
Required!
</span>
<span ng-if="myForm.myInput.$error.strictCheck">
Please input 'I am Programmer'
</span>
</form>
</body>
</html>
You can modify RegExp accordingly, to match your need. You can also set the input value using $setViewValue(modelValue) and $render()
mCtrl.$setViewValue("");
mCtrl.$render();
Related
I know this should be simple, but for the life of me I cannot figure
it out. I just need a mouseover event where it switches between 2
images until the fifth time you mouseover it changes to a third image.
here is what I have so far.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tamra Schnyder Midterm Q2</title>
<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
function showHover(img) {
if (img) {
img.src="images/img1.jpg";
}
}
function showNormal(img) {
if (img) {
img.src="images/img2.jpg"
}
}
$(document).ready(function() {
$("#img1").mouseover(function(){
showHover(this);
}).mouseout(function(){
showNormal(this);
});
});
</script>
</head>
<br>
<h1>picture hover</h1><br/>
<img id="img1" src="images/img1.jpg" />
</body>
You can increment a simple counter everytime the mouse is over the image, and change it to the third image instead of the second once count>=5:
function showHover(img) {
if (img) {
img.src="images/img1.jpg";
}
}
function showNormal(img, change) {
if (img) {
img.src=(change)?"images/img3.jpg":"images/img2.jpg";
}
}
$(document).ready(function() {
let count = 0;
$("#img1").mouseover(function(){
showHover(this);
count++;
}).mouseout(function(){
showNormal(this, count>=5);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="img1" src="images/img1.jpg" />
I am new to AngularJS. I am doing a project where label name will come from a database. I have to pass label id as a parameter and retrieve label name. When the page loads the value will get initialized in the label. But the problem is the value sets when I use ng-click. But I want this using ng-init/ng-bind, because clicking on the label is not a solution.
Here is the code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.test = function(e){
$scope.label=e.target.id;
}
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<label id="lblID" style="border:10px solid red;" ng-click="test($event)">{{label}}</label>
</div>
</body>
</html>
You should handle DOM manipulation in a directive as below.
DEMO
var app = angular.module('myApp', []);
app.controller('Ctrl', function ($scope) {
$scope.doSomething = function (e) {
alert(e);
};
});
app.directive('myDir', function () {
return function (scope, element, attrs) {
scope.doSomething(element);
};
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.test = function(e){
$scope.label=e.target.id;
}
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="Ctrl">
<label my-dir id="lblID" style="border:10px solid red;" ng-init="test('lblID')">{{label}}</label>
</div>
</body>
</html>
I am really new angular and I have been struggling with this issue all day long. I am trying to add check boxes dynamically to my html page using ng-repeat and bind their ng-data-model.
Here is my code :
<!DOCTYPE html>
<html >
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"> </script>
<script>
(function(angular) {
var helloApp = angular.module("helloApp", []);
helloApp.controller("HelloCtrl", ['$scope',function($scope) {
$scope.legsDurations = {};
var amountOfLegs = 3;
for(var k = 1; k <= amountOfLegs; k++) {
$scope.legsDurations[k] = {
disabled: true
};
}
}]);
})(window.angular);
</script>
</head>
<body ng-app="helloApp">
<div ng-controller="HelloCtrl">
<div ng-repeat="value in legsDurations">
<input ng-data-model="value.disabled" type="checkbox" >
{{value.disabled}}
</div>
</div>
</body>
</html>
ng-data-model is wrong. Use ng-model or data-ng-model
...
<input ng-model="value.disabled" type="checkbox">
...
Code:
<!DOCTYPE html>
<html >
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"> </script>
<script>
(function(angular) {
var helloApp = angular.module("helloApp", []);
helloApp.controller("HelloCtrl", ['$scope',function($scope) {
$scope.legsDurations = {};
var amountOfLegs = 3;
for(var k = 1; k <= amountOfLegs; k++) {
$scope.legsDurations[k] = {
disabled: true
};
}
}]);
})(window.angular);
</script>
</head>
<body ng-app="helloApp">
<div ng-controller="HelloCtrl">
<div ng-repeat="value in legsDurations">
<input ng-model="value.disabled" type="checkbox" >
{{value.disabled}}
</div>
</div>
</body>
</html>
When I have cellTemplate as the following,
{ field: 'Trial', cellTemplate: '<div class="ui-grid-cell-contents" title="TOOLTIP">{{grid.appScope.getAnchorLink(row)}}</div>' }
what I get is <a data-ng-href="localhost:50849/PatientCategory/Edit/1">Edit</a> in the column. But what I want is simply an anchor link with Edit text.
The getAnchorLink function is as follows
$scope.getAnchorLink = function (rowObj) {
var tempId = rowObj.entity.Id.toString();
return '<a data-ng-href="localhost:50849/PatientCategory/Edit/' + tempId + '">Edit</a>'
};
Can someone please correct me where I am wrong?
If you want to show anchor tag in ui-grid below is an example code,
app.js
var app = angular.module('app', ['ui.grid', 'ui.grid.cellNav','ui.grid.pinning']);
app.controller('MainCtrl', ['$scope', '$http', '$log',
function($scope, $http, $log) {
$scope.gridOptions = {
columnDefs: [{
'field': 'code'
}, {
'field': 'name'
}, {
'field': 'status'
},{
'field':'link',
'cellTemplate':'celltemplate.html'
}]
};
$scope.gridOptions.data = [{
"code": "Cox",
"name": "Carney",
"status": 0
}, {
"code": "Lorraine",
"name": "Wise",
"status": 1
}, {
"code": "Nancy",
"name": "Waters",
"status": 2
}];
}
]);
celltempalte.html
<div>
<a href="test.html?code={{row.entity.code}}&name={{row.entity.name}}&status={{row.entity.status}}">
Click me
</a>
</div>
index.html
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-cellNav></div>
</div>
<script src="app.js"></script>
</body>
</html>
main.css
.grid {
width: 500px;
height: 400px;
}
I would like to initialize an element whenever it is rendered using iron pages.
In the jsbin do the below operation
Click 'Toggle'
Click 'Toggle step'
Click 'Toggle'
Click 'Toggle' again
I expect to see 'step a'. As the x-example assigns 'step="a"'. However I see 'step b'. Is there any way to show 'step a' whenever y-example is shown?
jsbin: http://jsbin.com/regapemoqe/1/edit?html,output
Code:
<meta charset="utf-8">
<base href="http://polymer-magic-server.appspot.com/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="iron-pages/iron-pages.html" rel="import">
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<x-example></x-example>
<dom-module id="x-example">
<style>
:host {
display: block;
}
</style>
<template>
<button on-click="toggleSelection">Toggle</button>
<iron-pages
attr-for-selected="data-route"
selected=[[selected]]>
<section data-route="one">
<p>This is the one</p>
</section>
<section data-route="two">
<p>This is the other one</p>
<y-example
step="a"></y-example>
</section>
</iron-pages>
</template>
<script>
// only need this when both (1) in the main document and (2) on non-Chrome browsers
addEventListener('WebComponentsReady', function() {
Polymer({
is: "x-example",
properties: {
selected: {
type: String,
value: 'one'
}
},
toggleSelection: function() {
this.selected = (this.selected == 'one')?'two':'one';
}
});
});
</script>
</dom-module>
<dom-module id="y-example">
<style>
:host {
display: block;
}
</style>
<template>
<iron-pages
attr-for-selected="data-step"
selected="[[step]]">
<section data-step="a"><p>This is step a</p></section>
<section data-step="b"><p>This is step b</p></section>
</iron-pages>
<button on-click="toggleStep">Toggle step</button>
</template>
<script>
addEventListener('WebComponentsReady', function() {
Polymer({
is: "y-example",
properties: {
step: {
type: String,
value: 'a'
}
},
toggleStep: function() {
this.step = (this.step == 'a')?'b':'a'
}
});
});
</script>
</dom-module>
</body>
You could do something like this in your toggleSelection function of your x-example element:
toggleSelection: function() {
this.$$('y-example').step='a';
this.selected = (this.selected == 'one')?'two':'one';
}
See here: http://jsbin.com/tewaqa/edit?html,output