I've got
<div class="navbar-collapse">
<div class="row">
<div class="col-lg-2 img-fake"></div>
<div class="col-lg-10 native-item ">
<textarea class="form-control" rows="5" id="comment" ng-model="newComment" ng-keyup="$event.keyCode == 13 && comment(existingItem,newComment)"></textarea>
</div>
</div>
</div>
and in the comment function i've got
$scope.comment = function(existingItem,newComment){
existingItem.comments.push(newComment);
$scope.newComment = '';
} // just adding text from textarea to the list
so i'm wondering why the value of textarea does not go to empty value
http://plnkr.co/edit/kmBA3Cco8QNDL8i4eOjz its working.
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="navbar-collapse">
<div class="row">
<div class="col-lg-2 img-fake"></div>
<div class="col-lg-10 native-item ">
{{newComment}}
<textarea class="form-control" rows="5" id="comment" ng-model="newComment" ng-keyup="$event.keyCode == 13 && comment(existingItem, newComment)"></textarea>
</div>
</div>
</div>
</body>
</html>
In youe case it is not working because, you may not define comment property of existingItem
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.newComment = 'asdf';
$scope.existingItem = {};
$scope.existingItem.comments = [];
$scope.comment = function(existingItem, newComment){
existingItem.comments.push(newComment);
console.log(existingItem.comments);
$scope.newComment = '';
}
});
i had same issue and fixed like this
$scope.comment = function(existingItem,newComment){
existingItem.comments.push(newComment);
$scope.newComment = 'xx'; // add a random data
$scope.$evalAsync(function() { $scope.newComment = '' ; }); //or use $timeout(function() { $scope.newComment = '' ; });
}
Related
When I click on the image or text I want to hide this current div and show another div which also use ng-repeat
this code html to show primary image with text :
<div class="img-container" ng-repeat="sign in signs.List">
<img class="animated" ng-src="{{sign.animated_src}}" width="200" height="150" />
<div>{{sign.texte}}</div>
</div>
For example I have 4 image with text (number, alphat, ...)
click in text number => show this div that contains this and hide the other
<div class = "img-container" ng-repeat = "sign in signs.number">
<Img class = "animated" ng-src = "{{sign.animated_src}}" width = "200" height = "150"/>
<div> {{sign.texte}} </ div>
</div>
click in alphat => show this div that contains this and hide the other
<div class = "img-container" ng-repeat = "sign in signs.alphat">
<Img class = "animated" ng-src = "{{sign.animated_src}}" width = "200" height = "150"/>
<div> {{sign.texte}} </ div>
</div>
I hope I understand right..
HTML
<div class="img-container" ng-repeat="sign in signs.list">
<img class="animated" ng-src="{{sign.animated_src}}"
width="200" height="150"
ng-click="filterList(sign.texte)" />
<div ng-click="filterList(sign.texte)">{{sign.texte}}</div>
</div>
JS
$scope.filterList = function(char){
if(typeof char === typeof 0){
$scope.signs.list = $scope.signs.number;
}
else{
$scope.signs.list = $scope.signs.alpha;
}
};
$scope.signs = {
list: ["A", 1, "B", 2, "C", 3],
number: [1, 2, 3],
alpha: ["A", "B", "C"]
};
Working fiddle ==> https://jsfiddle.net/k19g6vsb/
use the ng-show and ng-hide directives
<div ng-hide="showItem" class="img-container" ng-repeat="sign in signs.List">
<img class="animated" ng-src="{{sign.animated_src}}" width="200" height="150" ng-click="showItem = !showItem" />
</div>
<div ng-show="showItem" class="img-container" ng-repeat="sign in signs.List">
<img class="animated" ng-src="{{sign.animated_src}}" width="200" height="150" ng-click="showItem = !showItem" />
</div>
</div>
<div ng-init="showThis = true" ng-click="showItem = !showItem"> {{sign.texte}}</div>
Here is the code sample please check
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.toggle = true;
$scope.toggleFilter = function() {
this.toggle = !this.toggle
}
/**** Ignore This ***/
var testDATA = {
name : "name",
name2: "name2"
}
var list = [];
for(var i=0;i<10;i++){
testDATA.name = angular.copy("name"+i);
list.push(testDATA);
}
console.log("test",list);
$scope.list = list;
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div>
<p ng-repeat="obj in list track by $index">
<span ng-hide="toggle">{{obj.name}}</span>
<span ng-show="toggle">{{obj.name2}}</span>
<span>
<input type="button" value="toggle" ng-click="toggleFilter();">
</span>
</p>
</div>
</body>
</html>
Here is the plunker for this :PLUNKER
Try this:
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Angular Ajax with PHP</title>
</head>
<body>
<h2>The form</h2>
<div ng-app="myApp" ng-controller="mainController">
<div class="img-container" ng-repeat="sign in signs.List">
<div ng-show="show == $index">
<img class="animated" ng-src="{{sign.src}}" ng-click="increment()" width="200" height="150" />
<div>{{sign.text}}</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller('mainController',function($scope){
$scope.show = 0;
$scope.signs = {};
$scope.signs.List = [];
$scope.signs.List.push({src:"img1.jpg",text:"Text 1"});
$scope.signs.List.push({src:"img2.jpg",text:"Text 2"});
$scope.increment = function() {
$scope.show = $scope.show + 1;
if ($scope.show >= $scope.signs.List.length) {
$scope.show = 0;
}
}
});
</script>
</body>
</html>
This is very Basic issue of angular but I am unable to fix this; I want to validate email address using ng-pattern but it failed on some condition
see the working Demo
failed condition : when i write some#thing it validated OK but that is not correct. Kindly help me to solve this veri basic issue.
(function() {
var app = angular.module('app', []);
app.controller ('MainCtrl', function ($scope){
var vm = this;
vm.title = "Email Validation";
vm.email = "";
vm.email_regex = '^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$';
});
})();
<html ng-app="app">
<head>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="angular.js#*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
</head>
<body ng-controller="MainCtrl as vm">
<h2>{{vm.title}}</h2>
<div class="col-md-12">
<form name="emailForm" novalidate="">
<div class="form-group" ng-class="{'has-error': emailForm.username.$touched && emailForm.username.$invalid }">
<label>Email</label>
<input type="email" class="col-md-12 form-control" name="username" ng-model="vm.email" ng-pattern="vm.email_regex" required />
</div>
<div ng-if="emailForm.username.$touched && emailForm.username.$invalid" ng-messages="emailForm.username.$error" class="text-danger">
<span ng-message="pattern">Invalid Username.</span>
<span ng-message="required">Please enter Username.</span>
</div>
</form>
</div>
<div class="row"></div>
<hr />
<pre>{{ emailform.username.$error | json }}</pre>
</body>
</html>
You need to remove ' '
from vm.email_regex
DEMO: http://plnkr.co/edit/tbLP5syvZEq7qtE4X75o?p=preview
Refer this: Why is Angularjs ng-pattern not working with the following regexp?
(function() {
var app = angular.module('app', []);
app.controller ('MainCtrl', function ($scope){
var vm = this;
vm.title = "Email Validation";
vm.email = "";
vm.email_regex = /^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
});
})();
In the following code taken from my app, the dropdown is not getting updated with the scope data. How can I make this work? I need to pass the dropdown options from parent controller to child controller. I am getting [$injector:modulerr] error.
<div ng-app="myApp" ng-controller="parentCtrl as pt">
<button ng-click="pt.callChild()">Change Dropdown</button>
<div ng-controller="childCtrl as ct">
<select ng-model="ct.selectedName" ng-options="item for item in ct.names">
</select>
</div>
</div>
JS:
var app = angular.module('myApp', []);
app.controller('parentCtrl', function ($scope) {
var vm = this;
var newArray = ["Steve", "Jony"];
vm.callChild = function () {
$scope.$broadcast('someEvent', newArray);
};
});
app.controller('childCtrl', function ($scope) {
var vm = this;
vm.names = ["Emil", "Tobias", "Linus"];
$scope.$on('someEvent', function (e, newArray) {
vm.names = newArray;
});
});
Here is the fiddle.
The code is working fine for me and I have incorporated angular 1.5 version.
See plnkr here .
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<div ng-app="myApp" ng-controller="parentCtrl as pt">
<button ng-click="pt.callChild()">Change Dropdown</button>
<div ng-controller="childCtrl as ct">
<select ng-model="ct.selectedName" ng-options="item for item in ct.names">
</select>
</div>
</div>
</html>
Using AngularJs, I want to dynamically disable particular date of a Datepicker. Here what I have did.
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope, $q) {
$scope.date1 = new Date();
$scope.date2 = new Date();
$scope.date2.setDate($scope.date2.getDate() - 1);
var currentDay = new Date();
$scope.isDateDisabled = function(date, mode) {
/*console.log("date=="+date.getTime());
console.log("currentdate"+$scope.date2.getTime());*/
if (date.getDate() === $scope.date2.getDate()) {
return true;
} else {
return false;
}
};
});
/* Put your css in here */
.padTop {
padding-top: 20px;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container padTop">
<div>
<div style="display:inline-block; min-height:290px;">
<datepicker ng-model="date1" min-date="minDate" show-weeks="true" date-disabled="isDateDisabled(date,mode)" class="well well-sm"></datepicker>
</div>
<div style="display:inline-block; min-height:290px;">
<datepicker ng-model="date2" min-date="minDate" show-weeks="true" class="well well-sm"></datepicker>
</div>
</div>
<p class="padTop">date1:</p>
<pre>
{{ date1 | date : 'dd/MM/yyyy' }}
{{ date2 | date : 'dd/MM/yyyy' }}
</pre>
</div>
</body>
</html>
It was disabled the date in 1st datepicker, which was selected in second datepicker. But If I change the date in 2nd datepicker It wont be reflected(i.e It wont be disabled in 1st datepicker). Anyway to handle this case?
AFAIK there is no clean way to do this, but the datepicker refreshes when you change your minDate attribute. So if you add this in your controller, it will work...
$scope.$watch("date2", function (newValue, oldValue) {
$scope.minDate= new Date();
$timeout(function () {
$scope.minDate = null;
}, 0);
});
I have a problem with SELECT options, when I do my first choice the content of my SELECT becomes empty.
here are my app.html && app.js
app.html
<html>
<head>
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/nodeCss.css">
</head>
<body ng-app="Webapp">
<h1>Module Opale</h1>
Titre<input type="text" placeholder="Titre"><br />
Metadonnées<input type="text" placeholder="Titre"><br />
Objectif du module<input type="text" placeholder="Objectif">
<script type="text/ng-template" id="tree_item_Opale.html">
<button class="addchild" ng-click="addChild(data)">addChild</button>
<button ng-show="data.parent" ng-click="addSibling(data)">addSibling</button>
<button class="delete" ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete children</button>
<div>
<select ng-model="choices" ng-options="choice as choice.name for choice in choices"></select>{{choices}}
<div ng-switch on="choices.id">
<div ng-switch-when="1"><h3>Division</h3>
Titre division<input type="text" /><br />
Titre court<input type="text" /><br />
</div>
<div ng-switch-when="2"><h4>Grain de contenu</h4>
Titre<input type="text" /><br />
Titre court<input type="text" /><br />
<h5>Information</h5>
Titre<input type="text" /><br />
<textarea rows="4" cols="70"></textarea>
</div>
</div>
</div>
<ul>
<li ng-repeat="data in data.nodes" ng-include="'tree_item_Opale.html'"></li>
</ul>
</script>
<ul ng-controller="treeCtrl">
<li ng-repeat="data in tree" ng-include="'tree_item_Opale.html'"></li>
</ul>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/rightClickDirective.js"></script>
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/plugins/bootstrap/bootstrap.min.js"></script>
</body>
</html>
app.js
angular.module("Webapp", ["ngSanitize","directive.contextMenu"])
.controller("treeCtrl", ['$scope', function($scope) {
$scope.choices=[
{id:'1',name:'Division'},
{id:'2',name:'Grain de contenu'},
$scope.delete = function(data) {
data.nodes = [];
};
$scope.addSibling = function(data) {
var post = data.parent.nodes.length + 1;
var newName = data.parent.name + '-' + post;
data.parent.nodes.push({name: newName,nodes: [], parent: data.parent});
};
$scope.addChild = function(data) {
var post = data.nodes.length + 1;
var newName = data.name + '-' + post;
data.nodes.push({name: newName,nodes: [], parent: data});
};
$scope.tree = [{name: "Node", nodes: []}];
}]);
nodeCss.css
ul {
list-style: none;
border-left: 1px dashed #ddd;
}
li {
margin-left: 20px;
}
button {
background: #63AE12;
color: #FFF;
border: 0;
font-size: 0.8em;
margin: 9px;
}
button.addchild {
background: #3094E7;
}
button.delete {
background: orange;
}
when I add child or sibling and I want to select an option, the first add the options are available but when i add second time the options disappear
This happens because you use choices, which is your array, as your ng-model. You need a different variable for ng-model. So what happens is that when you select, your choice becomes the only available option since it's your new array (it's binded because of the ng-model).
Do something like this:
<select ng-model="modelChoices" ng-options="choice as choice.name for choice in choices"></select>{{modelChoices}}