I want to hide "add new button" when Im creating the record. and only show it back when Im done creating record.
Same as the "submit one button", I want to hide it (submit one button) and showing back the "add new button" as Im done submitting. How to do that?
below is my code and here is my plunkr:
index.html
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<a ng-show="hideAddButton" ng-hide="hideAddButton" ng-click="addNew();hideAddButton = !hideAddButton">+ add new</a>
<form name="mainForm" ng-submit="submitAll()">
<ul>
<li ng-repeat="item in items" ng-form="subForm">
<input type="text" required name="name" ng-model="item.name"/>
<span ng-show="subForm.name.$error.required">required</span>
<button type="button" ng-disabled="subForm.$invalid" ng-click="submitOne(item);hideAddButton = !hideAddButton">Submit One</button>
</li>
</ul>
<button type="submit" ng-disabled="mainForm.$invalid">Submit All</button>
</form>
<hr/>
<div ng-show="lastSubmit">Last Submit:</div>
<pre>{{lastSubmit | json}}</pre>
</body>
</html>
app.js
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [];
$scope.addNew = function (){
$scope.items.push({ name: '' });
};
$scope.submitOne = function (item){
$scope.lastSubmit = angular.copy(item);
};
$scope.submitAll = function() {
$scope.lastSubmit = angular.copy($scope.items);
}
});
Here is my solution: http://plnkr.co/edit/8kOmWQ96UFkNOxZqcFMS?p=preview
app.controller('MainCtrl', function($scope) {
$scope.items = [];
$scope.isSubmitting = false;
$scope.addNew = function (){
$scope.isSubmitting = true;
// Here I added a state for each item.
$scope.items.push({ name: '', showButton:true });
};
$scope.submitOne = function (item){
item.showButton = false;
$scope.isSubmitting = false;
$scope.lastSubmit = angular.copy(item);
};
$scope.submitAll = function() {
$scope.items.forEach(function(i){i.showButton=false;})
$scope.isSubmitting = false;
$scope.lastSubmit = angular.copy($scope.items);
}
});
HTML
<body ng-controller="MainCtrl">
<a ng-hide="isSubmitting" ng-click="addNew();">+ add new</a>
<form name="mainForm" ng-submit="submitAll()">
<ul>
<li ng-repeat="item in items" ng-form="subForm">
<input type="text" required name="name" ng-model="item.name"/>
<span ng-show="subForm.name.$error.required">required</span>
<button ng-show="item.showButton" type="button" ng-disabled="subForm.$invalid" ng-click="submitOne(item);">Submit One</button>
</li>
</ul>
<button type="submit" ng-disabled="mainForm.$invalid">Submit All</button>
</form>
<hr/>
<div ng-show="lastSubmit">Last Submit:</div>
<pre>{{lastSubmit | json}}</pre>
</body>
I think this is what you are asking for, but I don't think the "submit all" button makes much sense in this scenario, unless you allow to add more items before submitting them (but you clearly state you want the "add new"-button hidden).
Also I was unsure if you actually wanted to store a state for each item, but showing/hiding all buttons didn't make much sense to me either...
You should use the ng-show or ng-hide directives.
with ng-show:
<button ng-show="hideAddButton === false">
with ng-hide:
<button ng-hide="hideAddButton === true">
Related
I'm creating a button to check all checkboxes. The problem is that my "all check" button doesn't work to check off all checkboxes when I click the button.
How can I do this?
angular.module('myapp', [])
.controller('MainController', ['$scope', function($scope) {
$scope.allcheck = function(){
angular.forEach($scope.checkboxes, function(item){
item.selected = event.target.checked;
});
};
}]);
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="myscript.js"></script>
</head>
<body>
<h1>AngularJS</h1>
<div ng-controller="MainController">
<button ng-click="allcheck()">all check</button>
<input type="checkbox">a
<input type="checkbox">b
<input type="checkbox">c
</div>
</body>
</html>
When you start with Angular you should think and do in angular.
First you define your model:
$scope.selected = [false, false, false];
Then you render your model into view, using repeat. (I don't remember the syntax)
<div ng-repeat="item in selected">
<input type="checkbox" ng-model="item" />
</div>
Then you implement check all by just simply changing the model.
$scope.checkAll = function() {
for (var i = 0; i < $scope.selected.length; i++) {
$scope.selected[i] = true;
}
}
Don't think like you are working with JQuery, think like MVC.
How to error proof JavaScript from item list by entering the same item or no item. Please help me guys of been researching for days StackOverFlow is my last hope. Any Help will be appreciated.`Thanks guys
var app = angular.module('myApp',[]);
app.controller('SportController', function($scope) {
$scope.newItem;
//List Sport
$scope.sports = ['Football', 'Basketball', 'Hockey', 'Soccer'];
//Remove Sport
$scope.addItem = function(){
$scope.sports.push($scope.newItem);
$scope.newItem = '';
}
//Remove Sport
$scope.removeItem = function(item){
var idx = $scope.sports.indexOf(item);
$scope.sports.splice(idx,1);
}
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller='SportController'>
<h1>Sport List</h1>
<div>
<form ng-submit="addItem()">
<div>
<input type="text" ng-model="newItem" placeholder"Add Sport"/>
<button type="submit">Save</button>
</div>
</form>
</div>
<p> {{ newItem }}</p>
<div>
<h4>Sports {{ sports.length }}</h4>
<table>
<tr ng-repeat="spor in sports">
<td>{{spor}}</td>
<td>
<button ng-click="removeItem(spor)">×</button>
</td>
</tr>
</table>
</div>
<!--End of div--->
</body>
</html>
Block the UI from being able to submit.
Or use a simple if check...
$scope.addItem = function(item){
//blank item
if(!item) return; //or display an alert
//item already exists
if($scope.sports.indexOf(item) > -1) return; //or display a different alert
$scope.sports.push(item);
$scope.newItem = null;
}
INDEX.HTML
<!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.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
<script src="app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="module in validation.modules">Title:{{module.title}}
description:{{module.description}}</div>
<div>
<form name="myForm" novalidate class="simple-form">
Title: <input value="" type="text" placeholder="a" ng-model="itemAmount"><br />
description: <input value="" type="text" placeholder="Name of Item" ng-model="itemName">
<br />
<button ng-click="addItem()">Add to list</button>
</form>
</div>
</body>
</html>
APP.JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.validation = {
"modules":
[
{
"title":"name of validation1",
"description":"description of validation1"
},
{
"title":"name of validation2",
"description":"description of validation2"
}
]
};
$scope.addItem = function () {
$scope.validation.modules.push({
title: $scope.itemAmount,
description: $scope.itemName
});
};
});
The below file is a pluknr in which i am just binding using ng-model to display
http://plnkr.co/edit/5NXHQiOApzNU5cn0yQT2
My Question is that you can see in the plunker file that there is a add to list button .. what i want to do is that i want to add a pop up tab like the one you can see in the MODAL section in the below link
https://angular-ui.github.io/bootstrap/
and add some text fields to it let's suppose a form and when i click add to list in the pop up form i want it to be added in the view..
Here you go
http://plnkr.co/edit/nI6PhjbAKEdTgXeWMKDx?p=preview
Opening the modal in main controller and handling the result from modal:
$scope.openModal = function() {
var modalInstance = $modal.open({
templateUrl : 'myModal.html',
controller: 'myModalController'
})
modalInstance.result.then(function(info) {
console.log(info);
$scope.validation.modules.push(info);
})
Binding data into modal controller:
app.controller('myModalController', function($scope, $modalInstance) {
$scope.infoToAdd = {
title: "",
description: ""
}
$scope.addItem = function() {
$modalInstance.close($scope.infoToAdd);
}
$scope.cancel = function() {
$modalInstance.dismiss("cancel");
}
});
Template:
<script type="text/ng-template" id="myModal.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
Title: <input type="text" placeholder="Title" ng-model="infoToAdd.title"><br />
description: <input type="text" placeholder="Description" ng-model="infoToAdd.description">
<br />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="addItem()">Add to list</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
I wrote a simple first app in AngularJS starting from a template for a todo list. None of the functions defined binds the scope (Both adding a new task or edit the current once). Anything I am doing commonly wrong in all the scopes of the controller?
Thanks in advance.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.8/angular.js"></script>
<script src="js/script.js"></script>
<link href='//fonts.googleapis.com/css?family=Roboto:100,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="page-container">
<h2>Todo</h2>
<ul class="todo-list" ng-repeat="todo in todos track by $index">
<li>
<span>{{ todo }}</span>
<button class="bt bt-achieve" ng-click="done(todo)">Done</button>
</li>
</ul>
</div>
<ul class="add-todo">
<li>
<input type="text" class="txt" placeholder="New Todo" ng-model="newTodo" ng-keyup="add($event)" />
</li>
</ul>
</body>
</html>
And my JS Script:
var app = angular.module('Todo', []);
app.controller('TodoCtrl', function($scope) {
$scope.newTodo = '';
$scope.todos = [
'Maged Task',
'Essam Task',
'Ashraf Task'
];
$scope.done = function(todo) {
var indexOf = $scope.todos.indexOf(todo);
if (indexOf !== -1) {
$scope.todos.splice(indexOf, 1);
}
};
$scope.add = function(e) {
if (e.which && e.which === 13) {
$scope.todos.push($scope.newTodo);
$scope.newTodo = '';
}
};
});
you haven't bound to the angular app or controller.
Try
<body ng-app="ToDo" ng-controller="TodoCtrl">
Change the body tag as below
<body ng-app="Todo" ng-controller="TodoCtrl" >
I always prefer to give initial data in ng-init method .
In your code you can use the initial data for $scope.todos like as below.
html code :
<body ng-app="Todo" ng-controller="TodoCtrl" ng-init="initialData()" >
javascript code
Inside controller
$scope.initialData = function(){
$scope.newTodo = '';
$scope.todos = [
'Maged Task',
'Essam Task',
'Ashraf Task'
];
}
change <body> to <body ng-app="Todo" ng-controller=TodoCtrl>
I have a simple web app that lists users by first name and the city they live in.
When the user clicks their name or city, the elements will be replaced by two input elements. One for the name and the second is for the city they live in. The input element(s) will help the user update their first name and city. Simple AngularJS Directive DOM Manipulation.
The problem I have is that when someone clicks the name or the city element, the bind text does not show up in the input element until you click the save update button in my info directive.
This is the HTML:
<!DOCTYPE HTML>
<html id="ng-app" ng-app="app">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<div ng-controller="UserController">
<div>
Search:
<input placeholder="search customers" data-ng-model="name" />
</div>
<div >
<h4>Customers</h4>
<ul>
<li ng-repeat="cust in customers | filter:name" >
<!-- My Info Directive -->
<info update="updateCustomer(this)" name="cust.name" city="cust.city"></info>
</li>
</ul>
</div>
<div>
Name: <input type="text" ng-model="newCustomer.name" /><br />
City: <input type="text" ng-model="newCustomer.city" /><br />
<button ng-click="addCustomer()" >Add New Customer</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
This is the JavaScript (main.js):
var app = angular.module("app",[])
.controller('UserController',function ControllerOne($scope){
$scope.customers = [
{name:"Milo",city:"London"},
{name:"John", city:"New York"},
{name:"Alfred",city:"Oslo"}
];
$scope.addCustomer = function (){
$scope.customers.push({name:$scope.newCustomer.name, city:$scope.newCustomer.city});
$scope.newCustomer.name = $scope.newCustomer.city = "";
};
$scope.updateCustomer = function(ele){
console.log("Name: " + ele.name + " City: " + ele.city);
}
})
.directive("info",function($compile){
return {
restrict :"E",
scope:{
name:"=",
city:"=",
update:"&"
},
template:"<div>{{name}}-{{city}}</div>",
link:function(scope,element,attrs){
element.bind("click",function(){
var html = "<input name='name' ng-model='name'/><input name='city'ng-model='city'/><button ng-click='update(this)'>Save Update</button>";
var dataScoped = $compile(html)(scope);
element.replaceWith(dataScoped);
});
}
}
});
click event is async. It means your scope doesn't know about model changes. Just wrap these two lines:
var dataScoped = $compile(html)(scope);
element.replaceWith(dataScoped);
with a scope.$apply:
scope.$apply(function(){
var dataScoped = $compile(html)(scope);
element.replaceWith(dataScoped);
});
Working: http://plnkr.co/edit/Z72AfK?p=preview