I`m using Angualr for my web.
I have this part in html code:
<div class="form-group">
<div class="text-form" style="float: left;">Companion URL</div>
<input type="text" placeholder="Companion URL" class="companion-url-box" ng-model="newCreative.companionUrl">
</div>
I want to add method (in the Controller) that when the text change, it will add a new button down.
How can I do it? I can`t understand how ng-change works.
thanks
Simply use ng-if to check if newCreative.companionUrl exists in scope :
<div class="form-group">
<div class="text-form" style="float: left;">Companion URL</div>
<input type="text" placeholder="Companion URL" class="companion-url-box" ng-model="newCreative.companionUrl">
<input type="button" value="Click me" ng-if="newCreative.companionUrl">
</div>
You can also use a function to validate button visibility :
index.html
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="scripts.js"></script>
</head>
<body ng-controller="SampleController as ctrl">
<div class="form-group">
<div class="text-form" style="float: left;">Companion URL</div>
<input type="text" placeholder="Companion URL" class="companion-url-box" ng-model="newCreative.companionUrl">
<input type="button" value="Click me" ng-if="ctrl.isButtonAvailable()">
</div>
</body>
</html>
script.js
angular.module('app', []);
angular.module('app').controller('SampleController', function ($scope) {
var ctrl = this;
ctrl.isButtonAvailable = function() {
if(!$scope.newCreative) {
return false;
}
// Ensure companion url starts with https:// using a regular expression
return /^https:\/\//.test($scope.newCreative.companionUrl);
}
});
Working example
Check out this Plunker : https://plnkr.co/edit/n8VtJrenePGf9hCbmzWJ
You can use the directives ng-change on input and ng-if or ng-show on button, plus a little code on controller.
Check this:
http://codepen.io/mQuixaba/pen/oZqXWG?editors=1111
HTML:
<div ng-app="myApp" ng-controller="MyController">
<label for="input">Text:</label>
<input type="text" id="input" ng-model="text" ng-change="showButton=true"/>
<button ng-if="showButton" ng-click="hideButton()">My Button</button>
</div>
JS:
angular
.module('myApp', [])
.controller('MyController', function($scope){
$scope.showButton = false;
$scope.text = "My text";
$scope.hideButton = function() {
$scope.showButton = false;
}
});
Related
I'm working on a nodejs project and over the last couple days I put together a dynamic form using Vuejs. However, for the list I am confused as to how I should omit the delete button for the first item of the dynamic portion of the from.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homemade</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="newRecipeContainer">
<form action="/recipes/createRecipe" method="POST">
<div class="recipeNameContainer">
<label class="recipeNameLabel">Title</label>
<input type="text" name="recipeName">
</div>
<div class="directionsContainer">
<button class="addDirectionButton" type="button" #click="addDirectionForm">Add Another Direction</button>
<div class="allDirections" v-for="(direction, index) in directions">
<label class="direction">{{ index + 1 }}.)</label>
<input type="text" name="directions" v-model="direction.direction">
<button class="deleteDirectionButton" type="button" #click="deleteDirectionForm(index)">Delete Direction</button>
</div>
</div>
<div class="recipeImage">
<input type="file" accept="image/*" />
</div>
<button class="createRecipeButton" type="submit">Create Recipe</button>
</form>
</div>
<script src="/controls/newRecipeControl.js"></script>
</body>
</html>
var app = new Vue({
el: '.directionsContainer',
data: {
directions: [
{
direction: ''
}
]
},
methods: {
addDirectionForm: function(){
this.directions.push({
direction: ''
})
},
deleteDirectionForm: function(index){
if(index != 0)
this.directions.splice(index, 1)
}
}
})
Initially, my thought was to use an if statement in the html to check whether index is equal to 0, however, that errors out. I am using ejs to embed javascript into my html. I am unsure how to best approach this, any suggestions?
Thanks for the help.
Use Vue's conditional rendering on your button element to only show it for indexes above zero 1️⃣.
<button
v-if="index > 0" 1️⃣
class="deleteDirectionButton"
type="button"
#click="deleteDirectionForm(index)"
>Delete Direction</button>
I want to display error message in label on click if the textbox is empty or undefined using AngularJS.
I am very beginner into AngularJS.
Please help to solve this issue.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="form">
<div ng-controller="formController">
<label>Name: <input type="text" ng-model="user.name" /></label><br />
<input type="submit" ng-click="update(user)" value="Save" />
<pre>{{master | json}}</pre>
</div>
<script>
angular.module('form', []).controller('formController', ['$scope', function ($scope) {
$scope.master = {};
$scope.update = function (user) {
debugger;
$scope.master = angular.copy(user);
if (user == undefined) {
debugger;
alert("Please enter text");
}
};
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate ng-submit="Validate()">
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span ng-show="ShowUserNameError">Username is required.</span>
</span>
</p>
</p>
<p>
<input type="submit" ng-click="Validate()">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.ShowUserNameError = false;
$scope.user = '';
$scope.email = '';
$scope.Validate = function(){
if(!$scope.user)
$scope.ShowUserNameError = true;
else
$scope.ShowUserNameError = false;
}
});
</script>
</body>
</html>
Enclose the input in a named form, name the input, and use ng-show:
<div ng-controller="formController">
<form name="form1">
<label>Name: <span ng-show="form1.item1.$error">{{form1.item1.$error}}</span>
<input name="item1" type="text" required ng-model="user.name" />
</label><br />
<input type="submit" ng-click="update(user)" value="Save" />
<pre>{{master | json}}</pre>
</form>
</div>
For more information, see
AngularJS <form> Directive API Reference - Example
AngularJS Developer Guide - Forms
I have a problem using a switch when it is in a set of switches generated by ng-repeat. My objective is to trigger an alert when each individual checkbox is clicked.
For example, when I click the switch to enable it should alert "1", and off should alert "0", but when I click the switch to enable it alerts "1" and when i click the other switch to enable it alerts "0".
Here is a plunkr with a sample single switch
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="switchdemo">
<h1>On Off switch using Angular JS</h1>
<div ng-controller="DemoController" ng-init="init()">
<div class="well">
<label class="switch" >
<input type="checkbox" ng-model="Token" ng-change="changeStatus();">
<span class="slider round"></span>
</label>
</div>
<div class="well">
<label class="switch" >
<input type="checkbox" ng-model="Token" ng-change="changeStatus();">
<span class="slider round"></span>
</label></div>
<pre>{{ status }}</pre>
</div>
</body>
</html>
AngularJS:
angular.module('switchdemo', []).controller('DemoController', function($scope){
$scope.init = function(){
$scope.status = 1;
}
$scope.changeStatus = function(){
$scope.status = !$scope.status;
if($scope.status==1) {
$scope.status=1;
alert($scope.status);
}
else
{
$scope.status=0;
alert($scope.status);
}
}
})
In html
<div ng-controller="MyCtrl">
<input type="checkbox" ng-model="Token" ng-change="changeStatus(Token);">
</div>
in javascript and you will got true/false into alert refer link http://jsfiddle.net/ADukg/18311/
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.changeStatus = function(data){
alert(data)
};
}
During "ng-show" the text is not appearing on gui. Help me to say what is wrong in the code.
<div ng-app="myApp" ng-controller="myCntrl">
<form name="nishant" ng-submit="submit()">
<div>
Name : <input type="text" name="name" ng-minlenght="5"
required="required"> <span
ng-show="nishant.name.$error.minlength">required12</span>
</div>
<button name="button" type="submit">SUbmit</button>
</form>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCntrl", function($scope) {
alert("nishant");
$scope.submit = function() {
alert("in the submit");
}
});
</script>
</div>
Please see why ng-show is not appearing in the screen. If i am removing my controller it is appearing.
Update:
Final Code for showing messages using ng-show.
JSFiddle Demo
Answer:
You need to add a ng-model for using the form validators (nishant.name.$error.minlength). Also you have misspelt ng-minlength.
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
//alert("nishant");
$scope.submit = function() {
alert("in the submit");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<form name="nishant" ng-submit="submit()">
<div>
Name :
<input type="text" name="name" ng-minlength="5" required="required" ng-model="name"> <span ng-show="nishant.name.$error.minlength">required12</span>
</div>
<button name="button" type="submit">SUbmit</button>
</form>
</div>
Unable to focus on textbox on button click:
<html ng-app="CommonApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="HeadCtrl" ng-init='username=""'>
<input id="UserName" type="text" class="login_boxdecor" ng-model="username" />
<div class="login_btn_outer">
<div class="login_btn_outer2" ng-click="cLgn();">
<a class="btn">Login</a>
</div>
</div>
</body>
</html>
var myApp = angular.module('CommonApp', []);
myApp.controller('HeadCtrl', function($scope){
$scope.cLgn= function(){
if($scope.username.trim().length==0)
{
//Here How to focus my textbox
}
};
});
<html ng-app="CommonApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="HeadCtrl" ng-init='username=""'>
<input id="UserName" type="text" class="login_boxdecor" ng-model="username" />
<div class="login_btn_outer">
<div class="login_btn_outer2" ng-click="cLgn();">
<a class="btn">Login</a>
</div>
</div>
</body>
</html>
var myApp = angular.module('CommonApp', []);
myApp.controller('HeadCtrl', function($scope){
$scope.cLgn= function(){
if($scope.username.trim().length==0)
{
document.getElementById("UserName").focus();
}
};
});
You can use angular.element to select your input box and can call focus(). Try something similar to below::
<html ng-app="CommonApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="HeadCtrl" ng-init='username=""'>
<input id="UserName" type="text" class="login_boxdecor" ng-model="username"/>
<div class="login_btn_outer">
<div class="login_btn_outer2" ng-click="cLgn();">
<a class="btn">Login</a>
</div>
</div>
</body>
</html>
var myApp = angular.module('CommonApp', []);
myApp.controller('HeadCtrl', function($scope){
$scope.focusText =false;
$scope.cLgn= function(){
if($scope.username.trim().length==0)
{
angular.element("#UserName").focus();
}
};
});