I am new at AngularJS and I am trying to figure out how to add and delete notes to the setup that I have created. I have tried a lot of different things but I cant figure out how to get it to work.
I have cleaned up my code so it should be easier to figure out.
Please take a look at the jsfiddle version or snippet of my code:
'use strict'
var app = angular.module('plunker', ['ui.sortable']);
app.controller('MainCtrl', function($scope) {
var i;
$scope.itemsList = {
items1: [],
items2: []
};
for (i = 0; i <= 5; i += 1) {
$scope.itemsList.items1.push({
'Id': i,
'Label': 'Item ' + i
});
}
$scope.sortableOptions = {
containment: '#sortable-container',
accept: function(sourceItemHandleScope, destSortableScope) {
return sourceItemHandleScope.itemScope.sortableScope.$id === destSortableScope.$id;
}
};
});
.as-sortable-item,
.as-sortable-placeholder {} #sortable-container {} .touch-mover {
float: right;
padding: 3px;
margin-top: 5px;
}
<html ng-app="plunker">
<head>
<script data-require="angular.js#1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
<script src="https://rawgithub.com/a5hik/ng-sortable/master/dist/ng-sortable.js"></script>
</head>
<body ng-controller="MainCtrl">
<div id="sortable-container">
<div class="form-actions">
<div class="input-append">
<form>
<input class="span3" size="16" type="text" placeholder="Add a note">
<button class="btn btn-success" type="button" ng-disabled="" ng-click="">
Add Note
</button>
</form>
</div>
</div>
<div class="sortable-row" as-sortable="sortableOptions" ng-model="itemsList.items1">
<div ng-repeat="item in itemsList.items1" class="simpel-fighter-input" as-sortable-item>
<input class="category-form textboxid" type="text" name="input" ng-model="item.Label" placeholder="Deltager1">
<div as-sortable-item-handle class="touch-mover">MOVE ME</div>
<a ng-click="" href>
<div class="touch-mover">DELETE</div>
</a>
<input class="category-form textboxid" style="float:right" type="text" name="input" ng-model="item.Label2" placeholder="Deltager2">
</div>
</div>
</div>
</body>
</html>
For adding a note just insert into your controller MainCtrl this function:
$scope.addNote = function() {
$scope.itemsList.items1.push({"Id" : $scope.itemsList.items1.length, "Label": "Item " + $scope.itemsList.items1.length})
}
and edit your form (add ng-model to input and ng-click function to button) like:
<input class="span3" size="16" type="text" ng-model="noteText" placeholder="Add a note">
<button class="btn btn-success" type="button" ng-disabled="" ng-click="addNote()">
Add Note
</button>
For deleting use in you controller something like
$scope.deleteNote = function(index) {
$scope.itemsList.items1.splice(index,1)
}
and attach this function to the tag "DELETE" like
ng-click="deleteNote($index)"
I hope this helps.
Related
In the view {{phonenumber}} value is not updating. But When I enter digits alert is working properly inside the controller.
Controller
var app = angular.module('myApp', []);
app.controller('PosController', function ($scope, $http) {
$scope.phonenumberFromDial = "";
$scope.phonenumber = "";
$scope.updatePhoneNumber = function(id) {
$scope.phonenumberFromDial=id;
$scope.phonenumber =$scope.phonenumber+$scope.phonenumberFromDial;
if($scope.phonenumber.length > 9) {
console.log("Log phonenumber: " + $scope.phonenumberFromDial);
alert('Here the Number: '+ $scope.phonenumber);
}
});
View
<div ng-app="myApp" ng-controller="PosController" class="panel" >
<div class="input-group col-xs-4">
<div class="input-group-btn">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Telefono</button>
</div><!-- /btn-group -->
<div ng-app="myApp" ng-controller="PosController">
<input id="phonenumber" class="form-control" ng-model="phonenumber" />
<!--<input type="text" id="phonenumber" ng-model="myModel" ng-keyup="(myModel.length >= 3) && myFunction()" class="form-control" data-inputmask='"mask": "(999) 999-9999"' data-mask>-->
</div>
<div class="input-group-btn" >
<button type="button" class="btn btn-success">Cliente</button>
</div><!-- /btn-group -->
<div ng-app="myApp" ng-controller="PosController">\
<input type="text" id="cliente" class="form-control" value="{{phonenumber}}">
</div>
</div>
</div>
Some observations :
remove unecessary multiple ng-controller="PosController" and ng-app="myApp" from the code and leave with only one at the top.
use ng-model="phonenumber" instead of value="{{phonenumber}}" to perform two way data binding.
Working demo :
var app = angular.module('myApp', []);
app.controller('PosController', function ($scope, $http) {
$scope.phonenumberFromDial = "";
$scope.phonenumber = "";
$scope.updatePhoneNumber = function(id) {
$scope.phonenumberFromDial=id;
$scope.phonenumber =$scope.phonenumber+$scope.phonenumberFromDial;
if($scope.phonenumber.length > 9) {
console.log("Log phonenumber: " + $scope.phonenumberFromDial);
alert('Here the Number: '+ $scope.phonenumber);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="PosController" class="panel" >
<div class="input-group col-xs-4">
<input type="text" id="phonenumber" class="form-control" ng-model="phonenumber"/>
<div class="input-group-btn" >
<button type="button" class="btn btn-success" ng-click="updatePhoneNumber(phonenumber)">Cliente</button>
</div>
<input type="text" id="cliente" class="form-control" ng-model="phonenumber">
</div>
</div>
There are several things you're missing. First of the all, as suggested in comment, you only need to declare ng-app and ng-controller once in the HTML with np-app on the top-most level. Secondly, you bind the scope data to the HTML using ng-model inside a input field, or {{phonenumber}} in HTML. Third, you forgot to close the controller with an ending parenthesis.
Here is a working demo:
var app = angular.module('myApp', []);
app.controller('PosController', function ($scope, $http) {
$scope.phonenumberFromDial = "";
$scope.phonenumber = "";
$scope.updatePhoneNumber = function(id) {
$scope.phonenumberFromDial=id;
$scope.phonenumber =$scope.phonenumber+$scope.phonenumberFromDial;
if($scope.phonenumber.length > 9) {
console.log("Log phonenumber: " + $scope.phonenumberFromDial);
alert('Here the Number: '+ $scope.phonenumber);
}
}
});
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
</head>
<body>
<div class="panel" >
<div class="input-group col-xs-4" ng-controller="PosController">
<div class="input-group-btn">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Telefono</button>
</div><!-- /btn-group -->
<div>
<input id="phonenumber" class="form-control" ng-model="phonenumber" />
<!--<input type="text" id="phonenumber" ng-model="myModel" ng-keyup="(myModel.length >= 3) && myFunction()" class="form-control" data-inputmask='"mask": "(999) 999-9999"' data-mask>-->
</div>
<div class="input-group-btn" >
<button type="button" class="btn btn-success">Cliente</button>
</div><!-- /btn-group -->
<div>
<input type="text" id="cliente" class="form-control" ng-model="phonenumber">
</div>
<span>Phone#: {{phonenumber}}</span>
<div>
Dial: <input type="text" id="cliente" class="form-control" ng-model="phonenumberFromDial">
</div>
<div class="input-group-btn" >
<button type="button" class="btn btn-success" ng-click="updatePhoneNumber(phonenumberFromDial)">Update phone#</button>
</div><!-- /btn-group -->
</div>
</div>
</body>
</html>
I have an input field. On focus a tooltip popups with a button that was added dynamically. How to make ng-click on that button working?
I was looking for solutions, but there is no any clear concrete example.
here is my plunkr: http://plnkr.co/edit/UFv6qcg68wD99HXf76xP?p=preview
Here is the code:
<body>
<div ng-controller="PopoverDemoCtrl">
<h4>Dynamic</h4>
<p>{{message}}</p>
<br><button class="btn btn-warning" ng-click="removeMessage()">Remove mesage</button>
<br><br>
<input type="text" value="Click me!" uib-popover-html="htmlPopover" popover-trigger="focus" class="form-control">
popover-trigger="focus" class="form-control">-->
</div>
</body>
</html>
controller
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $sce) {
$scope.dynamicPopover = {
content: 'Hello, World!',
templateUrl: 'myPopoverTemplate.html',
title: 'Title'
};
$scope.message = '';
$scope.showMessage = function(){
console.log("Simple message");
$scope.message = "Just added text";
}
$scope.removeMessage = function(){
console.log("Simple message");
$scope.message = "";
}
$scope.test = function(){
console.log("test me click")
}
$scope.placement = {
options: [
'top',
'top-left',
'top-right',
'bottom',
'bottom-left',
'bottom-right',
'left',
'left-top',
'left-bottom',
'right',
'right-top',
'right-bottom'
],
selected: 'top'
};
$scope.htmlPopover = $sce.trustAsHtml('<button ng-mousedown="test()"><b style="color: red">Add message</b></button> to the <div class="label label-success">page</div> content');
});
Replace uib-popover-html to uib-popover-template and use ng-click instead of ng-mousedown and give little delay to close the popop
<input type="text" ng-model="value" value="{{value}}" uib-popover-template="htmlPopover" popover-trigger="focus" popover-popup-close-delay="1000" class="form-control">
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>
<button ng-click="test()"><b style="color: red">Add message</b></button>
<div class="label label-success">page</div>
</div>
</script>
sample working code.
http://embed.plnkr.co/deN1VjHdXbTKXlqdQ0vt/
More info regarding Uib https://angular-ui.github.io/bootstrap/#/popover
Use uib-popover-template instead of uib-popover-html:
$scope.htmlPopover ='myPopoverTemplate.html';
<input type="text" value="Click me!" uib-popover-template="htmlPopover" popover-trigger="focus" class="form-control">
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>
<button ng-mousedown="test()"><b style="color: red">Add message</b></button>
<div class="label label-success">page</div>
</div>
</script>
http://plnkr.co/edit/ERjqaV3IJEtTPDQv9c0l?p=preview
I have a "search" where the user input a value and i want to send this value in the service because i want that another controller can have access. But for the moment i can't do it, if someone can help me it would be very usfull i using Angular js.
And the js
var app = angular.module('MainApp', [])
app.factory('Search', function($rootScope, $http){
var search = '';
function setSearch(bus){
search = bus;
}
function getSearch(){
return search;
}
return{
setSearch : setSearch,
getSearch: getSearch
};
//return myFactory;
/*
$scope.Search = function() {
return {
getDoctor: function () {
return $http.get('api/doctor' + $scope.search.searchText).then(function (response) {
orders = response.data;
$rootScope.$broadcast('handleSharedOrders', orders);
return orders;
})
}
};
}*/
});
app.controller('mainController', function ($scope, $http, Search) {
$scope.loadList = function() {
location.href = "doctors";
};
$scope.search.searchText = Search.getSearch();
$scope.Search = function(bus) {
console.log(bus);
Search.setSearch(bus);
}
$scope.doctors = {};
$http.get('/api/doctor').success(function (data) {
$scope.doctors = data;
})
.error(function (data) {
console.log('Error: ' + data);
});
/*
$http.get('/api/doctor/' + specialty).success(function (data) {
$scope.doctorsSpecialty = data;
})
.error(function (data) {
console.log('Error: ' + data);
});
*/
});
<!DOCTYPE html>
<html ng-app="MainApp">
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- Cargamos app -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="../Controllers/core.js"></script>
<title></title>
</head>
<body ng-controller="mainController">
<div align="center">
<img src="../img/logo.jpg" >
</div>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default" >
<div class="panel-heading" >
<h3 class="panel-title">Search Doctors</h3>
</div>
<div class="panel-body" >
<form role="form" >
<fieldset>
<div class="form-group" name="myForm" >
<input ng-model="search.searchText" type="text" class="form-control" placeholder="Search..." align="center">
</div>
<button class="btn btn-default" type="button" align="center" ng-click="Search(searchText)">
<b align="center">Search</b>
</button>
<!-- Change this to a button or input when using this as a form -->
</fieldset>
</form>
</div>
</div>
<div class="panel-heading" STYLE="background-color: #a7b5ce">
<h3 class="panel-title">List of Doctors</h3>
</div>
<div class="panel-body" >
<form role="form">
<fieldset>
<div class="form-group" name="myForm" >
<button class="btn btn-default" type="button" align="center" href=doctors ng-click="loadList()">
<b>List of Doctors</b>
</button>
</div>
<!-- Change this to a button or input when using this as a form -->
</fieldset>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
thank you for helping me
Here you have defined search.searchText:
<input ng-model="search.searchText" type="text" class="form-control" placeholder="Search..." align="center">
And here you are trying to pass just searchText (which is undefined):
<button class="btn btn-default" type="button" align="center" ng-click="Search(searchText)">
<b align="center">Search</b>
</button>
You need to either change your ng-model on your <input> to be 'search' or change the ng-click on your <button> to 'Search(search.searchText)'. If you choose to do the latter you may also want to explicitly create the search object in your controller.
I think you were doing it well, but your code has a few errors. First, you are not declaring the object search in your scope but you are assigning the property searchText to it. So you should do something like that:
$scope.search = {
searchText: ''
};
Then, in the view when you click search you are passing searchText but it should be search.searchText.
Have a look at this: https://jsfiddle.net/jruizx/54xcmgqp/
I am trying to toggle a class on click, please find my below code.
<li class="dropdown" data-ng-class="sign-open">
Sign In <b class="caret"></b>
<div class="dropdown-menu" style="padding: 15px;">
<form action="#" method="post" accept-charset="UTF-8" class="form-menu">
<input id="user_username" type="text" name="user[username]" size="33" placeholder="Username">
<input id="user_password" type="password" name="user[password]" size="33" placeholder="Password">
<label class="checkbox muted hidden-tablet">
<input type="checkbox">Remember Me</label>
<input class="btn span3" type="submit" name="commit" value="Sign In">
</form>
</div>
</li>
//sign in show-hide
$scope.signToogle = function () {
if ($scope.sign-open === "")
$scope.class = "open";
else
$scope.class = "";
}
this js funciton will addclass open so if ul has open class as it's parent then it will be visible.
But don't know how can I make that if click once then true and class append and if again clicked statement false and class will be removed.
You can use ng-class
<div ng-class="{active: is_active}">Some div</div>
<button ng-click="is_active = !is_active" ng-init="is_active=false">Click to toggle</button>
Set or reset $scope.is_active when you click
var app = angular.module('app', []);
app.controller('Main', function($scope) {
$scope.isOpen = false;
});
.item span {
display: none;
}
.item.close span.show-on-close {
display: block;
}
.item.open span.show-on-open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="Main">
<pre>isOpen: {{isOpen | json}}</pre>
<span class="item" ng-class="{'open':isOpen, 'close':!isOpen}">
<span class="show-on-open">open</span>
<span class="show-on-close">close</span>
</span>
<button ng-click="isOpen = !isOpen">Toggle</button>
</div>
</div>
NOTE: variable in JavaScript can't contains the dash character
so rename your $scope.sign-open to $scope.signOpen
you don't even have to define a function in the controller, you can do it like this:
<span ng-class="{'open':!signOpen, '':signOpen}"></span>
on click handler
<button ng-click="signOpen = !signOpen">toggle</button>
Below is my angularjs code: I am not able to clear inputComment field after form submit.
Here i am able to add record successfully but after adding record i am trying to clear the input field but i am not able to do it.
HTML code:
<body ng-app="taskDemo" ng-controller="taskController">
<div class="widget-body">
<form class="add-task" ng-if="addNewClicked" ng-init="addNewClicked=false;">
<div class="">
<div class="input-group">
<input name="comment" ng-model="inputComment" type="text" class="form-control" >
<div class="input-group-btn">
<button ng-click="addTask(inputComment)" type="submit" class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i> Add New Task
</button>
</div>
</div>
</div>
</form>
</div>
</body>
JS Code:
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" >
app = angular.module('taskDemo', []);
app.controller('taskController', function($scope, $http){
$scope.addTask = function (task) {
$http.post("ajax/addTask.php?task="+task)
.success(function ($response) {
getTaskList();
});
$scope.inputComment = '';
};
}
</script>
Read about Prototypical Inheritance here : What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
Change yr controller to this :
app.controller('taskController', function($scope, $http){
$scope.inputComment ={value:''};
$scope.addTask = function (task) {
$http.post("ajax/addTask.php?task="+task)
.success(function ($response) {
getTaskList();
});
$scope.inputComment ={value:''};
};
}
and Inside yr HTML page change this
<input name="comment" ng-model="inputComment" type="text" class="form-control" >
to
<input name="comment" ng-model="inputComment.value" type="text" class="form-control" >