How is it possible to delete the ul element with the reset button in the following code
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.0rc1/angular.min.js"></script>
</head>
<body>
<form ng-submit="submit()" ng-controller="Ctrl">Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
<input type="reset" id="reset" value="Reset" />
<ul>
<li ng-repeat="(key,val) in ret">{{key}} = {{val}}</li>
</ul>
</form>
<script>
function Ctrl($scope) {
$scope.ret = {}
$scope.reset = function() {
$scope.ret = {}
}
$scope.submit = function() {
var str = $scope.text;
var ret = $scope.ret
for (x = 0, length = str.length; x < length; x++) {
var l = str.charAt(x);
ret[l] = (isNaN(ret[l]) ? 1 : ret[l] + 1);
}
$scope.ret = ret
}
}
</script>
</body>
</html>
Thank you in advance.
You can use ng-show to hide it rather than remove it from the DOM.
<form ng-init="show=true" ng-controller="Ctrl" ng-submit="submit()">Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
<input type="reset" id="reset" value="Reset" ng-click="show=false" />
<ul ng-show="show">
<li ng-repeat="(key,val) in ret">{{key}} = {{val}}</li>
</ul>
</form>
The problem here is that you have not wired up the reset method on the controller. It should be like this.
<input type="reset" id="reset" value="Reset" ng-click='reset()'/>
See updated fiddle http://jsfiddle.net/cmyworld/WdVDh/1/
Related
in my form, i am using two submit buttons. when i submit the button, first need to check button id and execute function accordingly. please check my code.
$scope.saveme = function(user,data) {
alert(id);
}
<form name="myform" ng-submit="saveme(user,data)">
Name : <input type="text" ng-model="user.name"/>
Age : <input type="text" ng-model="user.age"/>
<button type="submit" id="s" data="{{button.id}}"> Save</button>
<button type="submit" id="ss" data="{{button.id}}">Save with Exit </button>
</form>
actually i need to alert button id that i clicked.
You can do something like this:
$scope.saveme = function(user,exit) {
if(exit){
//do something
}else{
//do something else
}
alert(id);
}
<form name="myform">
Name : <input type="text" ng-model="user.name"/>
Age : <input type="text" ng-model="user.age"/>
<button type="submit" id="s" ng-click="saveme(user,false)"> Save</button>
<button type="submit" id="ss" ng-click="sameme(user,true)">Save with Exit</button>
</form>
You will know which button was clicked checking the exit param value
You can try as below code.
if your first button return true second button will not trigger if your second button return false second button will trigger.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="myform">
Name : <input type="text" ng-model="user.name"/>
Age : <input type="text" ng-model="user.age"/>
<button type="submit" id="s" ng-click="saveme(1) || saveme1()" > Save</button>
</form>
</div>
</body>
</html>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller('myCtrl', function($scope) {
$scope.saveme = function(user) {
if(user === 1){
alert('first button');
return false
} else {
alert('first button fails');
return true;
}
};
$scope.saveme1 = function(user,data) {
alert('second button');
};
});
</script>
<form name="myform" ng-submit="saveme(user,data)">
Name : <input type="text" ng-model="user.name"/>
Age : <input type="text" ng-model="user.age"/>
<button type="submit" id="s" ng-click="save('s')"> Save</button>
<button type="submit" id="ss" ng-click=saveExit"('ss')" >Save with Exit </button>
</form>
$scope.saveExit = function(val)
{
alert(val);
}
$scope.save= function(val)
{
alert(val);
}
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 a div which has many buttons and a main button. I want to disable whole div once main button is clicked. Something like following
<body ng-app>
<div ng-disabled="disableDiv">
<input type="button" value="btn1" >
<input type="button" value="btn2" >
<input type="button" value="btn3" >
<input type="button" value="Main Button" ng-click="disableDiv=true">
</div>
</body>
Couple of options include:
Using fieldset instead of div:
var app = angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body ng-app='app'>
<fieldset ng-disabled="disableDiv">
<input type="button" value="btn1" >
<input type="button" value="btn2" >
<input type="button" value="btn3" >
<input type="button" value="Main Button" ng-click="disableDiv=true">
</fieldset >
</body>
Manually disabling:
var app = angular.module('app', []);
app.controller('myController', function($scope) {
$scope.disable = function(evt) {
angular.element(evt.target.parentNode).children().attr('disabled', true);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body ng-app='app' ng-controller="myController">
<div>
<input type="button" value="btn1" >
<input type="button" value="btn2" >
<input type="button" value="btn3" >
<input type="button" value="Main Button" ng-click="disable($event)">
</div>
</body>
ng-disabled on each element
var app = angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body ng-app='app'>
<div>
<input type="button" value="btn1" ng-disabled="disableDiv">
<input type="button" value="btn2" ng-disabled="disableDiv">
<input type="button" value="btn3" ng-disabled="disableDiv">
<input type="button" value="Main Button" ng-disabled="disableDiv" ng-click="disableDiv=true">
</div>
</body>
You can create a function in the controller and set the disabled attribute to each button:
js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.btnDisabled = false;
$scope.disableDiv = function() {
$scope.btnDisabled = true;
}
});
html
<body ng-controller="MainCtrl">
<div>
<input type="button" value="btn1" ng-disabled="btnDisabled">
<input type="button" value="btn2" ng-disabled="btnDisabled">
<input type="button" value="btn3" ng-disabled="btnDisabled">
<input type="button" value="Main Button" ng-click="disableDiv()" ng-disabled="btnDisabled">
</div>
</body>
Plunker
You might want something like this:
<body ng-app>
<div ng-hide="disableDiv">
<input type="button" value="btn1" >
<input type="button" value="btn2" >
<input type="button" value="btn3" >
<input type="button" value="Main Button" ng-click="disableDiv=true">
</div>
</body>
The ng-hide directive will hide the element when its value is true.
ng-disabled works only on HTML input elements. The div element has no “disabled” attribute, that’s why it fails.
https://docs.angularjs.org/api/ng/directive/ngDisabled#usage
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.
how do i find the trigger button in form by ng-submit
and get attribut in this button
<form ng-submit="submit()" ng-controller="Ctrl">
<input type="submit" att1="A" att2="B" value="Edit" />
<input type="submit" att1="C" att2="D" value="Delete" />
</form>
<script>
function Ctrl($scope) {
$scope.submit = function() {
alert(this.att1)
alert(this.att2)
}
}
</script>
You can use ng-click to change values on your scope prior to submission
<form ng-submit="submit()" ng-controller="Ctrl">
<input type="submit" ng-click="setAtts('A', 'B')" value="Edit" />
<input type="submit" ng-click="setAtts('C', 'D')" value="Delete" />
</form>
<script>
function Ctrl($scope) {
$scope.submit = function() {
alert($scope.att1);
alert($scope.att2);
};
$scope.setAtts = function(a1, a2) {
$scope.att1 = a1;
$scope.att2 = a2;
};
}
</script>
Edit: As a side note $event will not work for ng-submit, if you're interested in using $event.target (which probably shouldn't be done from a controller anyhow)