This input value should be "Paris" but it does not display.
What is wrong with my code?
(function(angular, undefined) {
var mon_app = angular.module('mon_app', []);
angular.module('mon_app').controller('monctrl', function($scope) {})
}(window.angular));
<!DOCTYPE html>
<html class="app" ng-app="mon_app">
<head lang="fr" class="app">
</head>
<body>
<div ng-controller="monctrl">
This input value is "Paris"
<input name="lieu" ng-model="lieu" type="text" value="Paris" />
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.js"></script>
</body>
You cannot mix regular HTML (the value attribute of your input) and the angular-driven ng-model. The input will always display the value of what's in ng-model, here lieu, hence you should iniialize $scope.lieu with the Paris value.
(function(angular, undefined) {
var mon_app = angular.module('mon_app', []);
angular.module('mon_app').controller('monctrl', function($scope) {
$scope.lieu = "Paname";
})
}(window.angular));
<!DOCTYPE html>
<html class="app" ng-app="mon_app">
<head lang="fr" class="app">
</head>
<body>
<div ng-controller="monctrl">
This input value is "{{lieu}}"
<input name="lieu" ng-model="lieu" type="text"/>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.js"></script>
</body>
Related
I have an ng-required condition on my TextEdit.
When I check the google inspection screen, I can see that my condition works properly (Test.Pack.substring(0,2) != 'RR')
However, I see that even though ng-required = false, it is still has a required = "required" property on the element.
my code and screenshot in below. Is there any idea about this?
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="TestList" id="InsertForm" ng-submit="insert(Test);">
<div>
<input ng-model="Test.Pack" >
</div>
<div>
<input ng-model="Test.LM" ng-required="{{Test.Pack.substring(0,2) != 'RR'}}">
</div>
<div>
<button ng-disabled="TestList.$invalid">Test Button</button>
</div>
</form>
</div>
</body>
</html>
<script src="angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
app.controller('myCtrl', function($scope) {
});
</script>
The value passed to ng-required should be boolean.So change this
<div>
<input ng-model="Test.LM" ng-required="{{Test.Pack.substring(0,2) != 'RR'}}">
</div>
to
<div>
<input ng-model="Test.LM" ng-required="Test.Pack.substring(0,2) != 'RR'">
</div>
I am trying to pass two regex variable regex1 and regex2 for email and mobile number into single ng-pattern by using "OR" condition but it is not working. if i pass a single variable at a time then it works perfectly. So what i have to do to pass two variable at a time into single ng-pattern directive.
please suggest solution..
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Form Validate</title>
<style>
input.ng-invalid.ng-dirty{border:1px solid red;}
</style>
</head>
<body>
<div ng-controller="myCtrl">
<form name="frm">
<input type="text" name="udetail" ng-model="user.udetail" placeholder="Enter email or phone number" ng-pattern="regex1 || regex2" required>
<span ng-show="frm.udetail.$dirty && frm.udetail.$error.required">required</span><br>
</form>
</div>
<script src="https://code.angularjs.org/1.2.3/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.regex1 = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
$scope.regex2 = /^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[789]\d{9}$/;
});
</script>
</body>
</html>
What you can do is create a function in which you can taken both regex and based on these regex return true and false and from ng-pattern call that function
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head>
<meta charset="utf-8">
<title>Form Validate</title>
<style>
input.ng-invalid.ng-dirty{border:1px solid red;}
</style> </head> <body> <div ng-controller="myCtrl"> <form name="frm">
<input type="text" name="udetail" ng-model="user.udetail" placeholder="Enter email or phone number" ng-pattern="regex1 || regex2" required>
<span ng-show="frm.udetail.$dirty && frm.udetail.$error.required">required</span><br>
</form> </div> <script src="https://code.angularjs.org/1.2.3/angular.min.js"></script> <script>
var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) {
$scope.regex1 = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
$scope.regex2 = /^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[789]\d{9}$/; });
$scope.runBothRegex = (function(){
return {
var value = $scope.user.udetail;
if(regex1.test(value) || regex2.test(value)){
return true;
}
return false;
}
})();
</script> </body> </html>
Given an input with ngModel, how can i get the viewValue inside ngChange function?
<input type="text" ng-model="getMyObject().value" ng-change="insert(1, 'my object property')" />
I have tried:
<input type="text" ng-model="getMyObject().value" ng-change="insert(1, getMyObject().value)" />
But return undefined.
Check this example and verify your code:
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.list = [1, 5, 7];
$scope.myObj = {value: 10};
$scope.getMyObject = function() {
return $scope.myObj;
}
$scope.insert = function(pos, value) {
$scope.list.push(value);
}
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<input type="text" ng-model="getMyObject().value" ng-change="insert(1, getMyObject().value)" />
<br>
<pre>myObj = {{myObj|json}}</pre>
<pre>list = {{list|json}}</pre>
</body>
</html>
The property name to which is bound your ng-model directive must be accessible: it has to be referred to an object in the scope.
Trying to do simple thing in AngularJS: form->if you put right word->button appears->u can click and go to a different page;(i didn;t try to put a link to the button since it doesn;t appear even without a link)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="foundation.min.css">
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<input type="text" ng-model="MyCtrl.pass">
<div class="button" ng-show="kPass">click me</div>
</div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
and the js
angular.module('myApp', [])
.controller('MyCtrl', MyCtrl)
function MyCtrl($scope){
$scope.kPass = false;
$scope.pass = "empty";
$scope.$watch($scope.pass,function(){
if($scope.pass == "parola"){
$scope.kPass = !$scope.kPass;
}
})
};
problem: if i type in parola, the button does not appear
i am new to java script. thanks !
You should first read some angular tutorials, you have totaly wrong access to scope and you are using wrong $watch
angular.module('myApp', [])
.controller('MyCtrl', MyCtrl)
function MyCtrl($scope){
$scope.kPass = false;
$scope.pass = "empty";
$scope.$watch('pass',function(){
if($scope.pass == "parola"){
$scope.kPass = !$scope.Kpass;
}
})
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="foundation.min.css">
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<div>
<input type="text" ng-model="pass">
<div class="button" ng-show="kPass">click me</div>
</div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
And next thing, you are overkilling your code. You can inline it in template without any controller function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="foundation.min.css">
</head>
<body ng-app="myApp">
<div >
<input type="text" ng-model="pass">
<div class="button" ng-show="pass == 'parola' ">click me</div>
</div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
angular.module('app',[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
Please input : 'parola' <input type="text" ng-model="pass">
<button ng-show="pass == 'parola'">Next step</button>
</body>
There are several errors here.
First, the password field is bound to MyCtrl.pass. But you're watching the value of $scope.pass
Second, $scope.$watch expects an angular expression to evaluate as argument, not a value to watch. So watching the string 'MyCtrl.pass' would be the correct thing to do.
Third, you shouldn't use a watch at all. You should just use ng-show="isPasswordValid(pass)"(see below), and return true or false from this function.
Fourth, instead of doing $scope.kPass = ($scope.pass == "parola"), you're inverting the value of $scope.kPass, but only if the value is correct. So if it goes from incorrect to correct, kPass will become true. Then if it becomes incorrect, kPass will stay true. And if it becomes correct again, it will become false.
So, to resume, all you need is
<div ng-controller="MyCtrl">
<input type="text" ng-model="pass">
<div class="button" ng-show="isPasswordValid(pass)">click me</div>
</div>
and
$scope.isPasswordValid = function(password) {
return pass === 'parola';
};
I am newbie to Angular and web development, I have a text input area that needs to be selected (highlighted) when a button is clicked in Angular.
do I need to something like angular.element(document.getElelmentById(txt1)) and do select on it?
Similar to this thread:
Selecting all text in HTML text input when clicked , the question is, is there a rightway/better way to do this in Angular?
I have searched for an answer, closest I could get was this thread: How to set focus on input field? but couldn't successfully convert the suggestions for select().
Here is my jsfiddle in plain js: http://jsfiddle.net/x62ye14y/, a translation to angular would be greatly appreciated.
<!DOCTYPE html>
<html>
<body>
Select your favorite fruit:
<input type="text" id="id123" placeholder="ENTER VALUE">
<p>Click the button to select text in the textbox</p>
<button onclick="myFunction()">Select Txt</button>
<script>
function myFunction() {
document.getElementById("id123").select();
}
</script>
</body>
</html>
Here is the code I have so far,:
<!DOCTYPE html>
<html ng-app="demo">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
</head>
<body>
<div ng-controller="DemoCtrl">
<input type="text" ng-model="content" id="txt1"/>
<button ng-click="selectOnClick()">Select Txt</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js">
</script>
<script type="text/javascript">
var mod1 = angular.module('demo', []);
mod1.controller('DemoCtrl', function ($scope) {
$scope.content = 'some text';
});
mod1.directive('selectOnClick', function () {
// Linker function
var element1 = angular.element("txt1");
element1.select();
});
</script>
</body>
</html>
http://plnkr.co/edit/DKxAs4QfkLzwAYPxx7tW?p=preview
Simple way to do is using click event.
for example
<input type = "text" (click) = "$event.target.select()">
Can you try this:
http://plnkr.co/edit/PzcINVKw6KNBFxlZUgAS?p=preview
<!DOCTYPE html>
<html ng-app="demo">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
</head>
<body>
<div ng-controller="DemoCtrl">
<input type="text" ng-model="content" select-on-click />
<p>Content: {{content}}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app:
(function (angular) {
var module = angular.module('demo', []);
module.controller('DemoCtrl', function ($scope) {
$scope.content = 'foobar';
});
module.directive('selectOnClick', function () {
// Linker function
return function (scope, element, attrs) {
element.bind('click', function () {
this.select();
});
};
});
}(angular));
you just need to move the select-on-click to a button