I'm trying to grab an ID attribute from the input field on change.
myApp.controller('OnChangeController', ['$scope', function($scope) {
$scope.Change = function(e) {
//alert(e);
$scope.output = e.$attr;
}
}]);
<div ng-controller="OnChangeController">
<input ng-model="change" id="ChangeID1" ng-change="Change(this)"> {{ output }}
<input ng-model="change" id="ChangeID2" ng-change="Change(this)"> {{ output }}
</div>
How to grab the element's ID attribute?
I wanted my ID, darn it :P
Here's nice, pointless, directive to get it.
I was writing code based on this example: http://jsfiddle.net/simpulton/E7xER/
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script>
var firstApp = angular.module('firstApp', []);
firstApp.directive('myFirstApp', function() {
var variable = function(scope, element, attrs) {
var elemArray = element.children();
$.each(elemArray, function() {
$(this).on('click', function() {
var id = $(this).attr("id");
alert(id);
});
});
};
return {
restrict: 'AEC',
link: variable
};
});
</script>
</head>
<body ng-app="firstApp">
<my-first-app>
<button id="a1">button 1</button>
<button id="a2">button 2</button>
</my-first-app>
<br />
<my-first-app>
<button id="b1">button 1</button>
<button id="b2">button 2</button>
</my-first-app>
</body>
</html>
Related
In angularjs if i change or remove image it does not make any changes. After refreshing the page it show the changed image.I am using following line to remove image
jQuery
$('#profile_image').val('')
This Sample is basic if you want to know more about AngularJs click on link
var app = angular.module("app", []);
app.controller("ctrl", [
"$scope",
function($scope) {
$scope.imgShow = true;
$scope.imgSrc = "https://www.gravatar.com/avatar/75025ad9a8cfdaa5772545e6e8f41133?s=32&d=identicon&r=PG&f=1";
$scope.display = function() {
$scope.imgShow = true;
$scope.imgSrc = "https://www.gravatar.com/avatar/75025ad9a8cfdaa5772545e6e8f41133?s=32&d=identicon&r=PG&f=1";
}
$scope.change = function() {
$scope.imgSrc = "https://www.gravatar.com/avatar/fccd71b79b3571b459cdfe40e7bf5dd8?s=32&d=identicon&r=PG&f=1";
}
$scope.remove = function() {
$scope.imgShow = false;
}
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<img ng-src="{{imgSrc}}" ng-show="imgShow">
<hr/>
<button ng-click="display()" ng-hide="imgShow">display image</button>
<button ng-click="change()">change image</button>
<button ng-click="remove()">remove image</button>
</div>
If you want to manipulate the DOM in AngularJS you should use directives for this purpose.
You should avoid using jquery inside of your controllers and simply work with your model. Below is fileUpload directive that could help you to work with <input type="file"> in a more angularjs-way:
angular.module('myApp', [])
.controller('TestController', ['$scope', function ($scope) {
var ctrl = this;
ctrl.imageFile = null;
ctrl.clearFile = clearFile;
function clearFile(){
ctrl.imageFile = null;
}
$scope.$ctrl = ctrl;
}])
.directive('fileUpload', [function () {
return {
require: "ngModel",
restrict: 'A',
link: function ($scope, el, attrs, ngModel) {
function onChange (event) {
//update bindings with $applyAsync
$scope.$applyAsync(function(){
ngModel.$setViewValue(event.target.files[0]);
});
}
//change event handler
el.on('change', onChange);
//set up a $watch for the ngModel.$viewValue
$scope.$watch(function () {
return ngModel.$viewValue;
}, function (value) {
//clear input value if model was cleared
if (!value) {
el.val("");
}
});
//remove change event handler on $destroy
$scope.$on('$destroy', function(){
el.off('change', onChange);
});
}
};
}]);
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.3.20/angular.js"></script>
<div ng-app="myApp">
<div ng-controller="TestController">
<input type="file" file-upload ng-model="$ctrl.imageFile" />
<input type="button" ng-click="$ctrl.clearFile()" value="Reset" />
<div ng-if="$ctrl.imageFile">
{{$ctrl.imageFile.name}}<br />
{{$ctrl.imageFile.size}} byte(s)<br/>
{{$ctrl.imageFile.type}}
</div>
</div>
</div>
UPDATE: Also take a look at this useful reading.
I am trying that on a button click, a div and and input tag are created and the input tag contain ng-model and the div has binding with that input.
Kindly suggest some solution.
You can create the div and input beforehand and and do not show it by using ng-if="myVar". On click make the ng-if="true".
<button ng-click="myVar = true">
In controller : $scope.myVar = false;
$scope.addInputBox = function(){
//#myForm id of your form or container boxenter code here
$('#myForm').append('<div><input type="text" name="myfieldname" value="myvalue" ng-model="model-name" /></div>');
}
Here is another solution, in which there's no need to create a div and an input explicitly. Loop through an array of elements with ng-repeat. The advantage is that you will have all the values of the inputs in that array.
angular.module('app', [])
.controller('AppController', AppController);
AppController.$inject = ['$scope'];
function AppController($scope) {
$scope.values = [];
$scope.add = function() {
$scope.values.push('');
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="AppController">
<button ng-click="add()">Click</button>
<div ng-repeat="value in values track by $index">
<input type="text" ng-model="values[$index]"/>
<div>{{values[$index]}}</div>
</div>
<pre>{{values}}</pre>
</div>
UPDATE. And if you want only one input, it's even simpler, using ng-show.
angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<button ng-click="show = true">Click</button>
<div ng-show="show">
<input type="text" ng-model="value"/>
<div>{{value}}</div>
</div>
</div>
You should use $compile service to link scope and your template together:
angular.module('myApp', [])
.controller('MyCtrl', ['$scope', '$compile', '$document' , function MyCtrl($scope, $compile, $document) {
var ctrl = this;
var inputTemplate = '<div><span ng-bind="$ctrl.testModel"></span>--<span>{{$ctrl.testModel}}</span><input type="text" name="testModel"/></div>';
ctrl.addControllDynamically = addControllDynamically;
var id = 0;
function addControllDynamically() {
var name = "testModel_" + id;
var cloned = angular.element(inputTemplate.replace(/testModel/g, name)).clone();
cloned.find('input').attr("ng-model", "$ctrl." + name); //add ng-model attribute
$document.find('[ng-app]').append($compile(cloned)($scope)); //compile and append
id++;
}
return ctrl;
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.6.2/angular.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl as $ctrl">
<input type="button" value="Add control dynamically" ng-click="$ctrl.addControllDynamically()"/>
</div>
</div>
UPDATE: to add a new compiled template each time the button is clicked, we need to make a clone of the element.
UPDATE 2: The example above represents a dirty-way of manipulating the DOM from controller, which should be avoided. A better (angular-)way to solve the problem - is to create a directive with custom template and use it together with ng-repeat like this:
angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function MyCtrl($scope) {
var ctrl = this;
ctrl.controls = [];
ctrl.addControllDynamically = addControllDynamically;
ctrl.removeControl = removeControl;
function addControllDynamically() {
//adding control to controls array
ctrl.controls.push({ type: 'text' });
}
function removeControl(i) {
//removing controls from array
ctrl.controls.splice(i, 1);
}
return ctrl;
}])
.directive('controlTemplate', [function () {
var controlTemplate = {
restrict: 'E',
scope: {
type: '<',
ngModel: '='
},
template: "<div>" +
"<div><span ng-bind='ngModel'></span><input type='type' ng-model='ngModel'/></div>" +
"</div>"
}
return controlTemplate;
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.6.2/angular.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl as $ctrl">
<input type="button" value="Add control dynamically" ng-click="$ctrl.addControllDynamically()"/>
<div ng-repeat="control in $ctrl.controls">
<control-template type="control.type" ng-model="control.value"></control-template>
</div>
</div>
</div>
I want a angularjs code in which 1 controller is using .service set method to set the value and another controller using the .service get method to retrieve that value.
also i tried this code please let me know why it is not printing the right output.
i tried this code but after setting value it is not printing value...can you help me out in this ..
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" ></script>
<script>
var app = angular.module('myApp', []);
app.service('sharedProperties', function() {
var stringValue = ' ';
return{
getString: function() {
return stringValue;
},
setString: function(value) {
stringValue = value;
}
}});
app.controller('get', function($scope,sharedProperties) {
$scope.stringValue = sharedProperties.getString();
});
app.controller('set', function($scope, sharedProperties) {
$scope.setString = function(newValue) {
$scope.objectValue.data = newValue;
sharedProperties.setString(newValue);
};
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="set">
<input type=text ng-model="newValue">
<button onclick="setString(newValue)" >Click here</button>
</div>
<div ng-controller="get">
value is {{stringValue}}
</div>
</body>
</html>
Answers will be appreciated.
I dont understand what is stopping you?
Just read the angular docs https://docs.angularjs.org/guide/services
Quick fiddle
angular.module('serviceApp',[]);
angular.module('serviceApp').service('SharedService',[function(){
var value = '';
this.set = function(val){
value = val;
};
this.get = function(val){
return value;
}
}]);
angular.module('serviceApp').controller('OneCtrl',['$scope','SharedService',function($scope,sharedService){
$scope.form = {value:''}
$scope.setValue = function(){
sharedService.set($scope.form.value);
}
}]);
angular.module('serviceApp').controller('TwoCtrl',['$scope','SharedService',function($scope,sharedService){
$scope.value = sharedService.get();
$scope.getValue = function(){
$scope.value = sharedService.get();
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="serviceApp">
<div ng-controller="OneCtrl">
<input ng-model="form.value" type="text" />
<button type="button" ng-click="setValue()">Set</button>
</div>
<div ng-controller="TwoCtrl">
<button type="button" ng-click="getValue()">Get</button>
Value: {{value}}
</div>
</div>
I am trying to track button clicks a user performs on a page/view. I am trying to get the element idwhich was clicked.
Is there a way to do this without having to tie a function or directive to each element?
ng-controller and ng-click
HTML:
<body ng-controller="MyController" ng-click="go($event)">
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
JS:
$scope.go = function(e) {
var clickedElement = e.target;
console.log(clickedElement);
console.log(clickedElement.id);
};
Demo: http://plnkr.co/edit/1O6pCVrvgu7Bl8b6TlPF?p=preview
Directive:
HTML:
<body my-directive>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
JS:
app.directive('myDirective', function () {
return {
link: function (scope, element, attrs) {
element.bind('click', function (e) {
var clickedElement = e.target;
console.log(clickedElement);
console.log(clickedElement.id);
});
}
}
});
Demo: http://plnkr.co/edit/eevnMFu2YBj3QqRraeZh?p=preview
I am having an issue refreshing/updating an angular directive. Basically there is a Flag button which will make an async call to server and if it's successful, change the property userFlags which should disable the button and change it's text to "Flagged...".
Here is the directive:
app.directive('flagable', function() {
return {
restrict: 'E',
scope: { item: '=' },
templateUrl: '/Content/templates/flagable.tmpl',
controller: function($scope) {
$scope.flag = function () {
$scope.$apply(function () {
// ITS NOT GOING IN HERE!
//AJAX CALL HERE
model.$modelValue.userFlags = [];
Messenger().post("Your request has succeded! ");
});
};
}
};
});
Here is the template:
<div class="btn-group pull-right">
<button class="btn btn-small btn-danger" ng-disabled="{{item.userFlags != null}}"><i class="icon-flag"></i>
<any ng-switch="item.userFlags==null">
<any ng-switch-when="true">Flag</any>
<any ng-switch-when="false">Flagged...</any>
</any>
</button>
<button class="btn btn-small btn-danger dropdown-toggle" data-toggle="dropdown" ng-disabled="{{item.userFlags != null}}"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Inappropriate</li>
<li>Overpost</li>
<li>Spam</li>
</ul>
</div>
Interestingly enough, changing the controller logic to:
$scope.flag = function () {
$scope.item.userFlags = [];
Messenger().post("Your request has succeded! " + $scope.item.viewCount);
};
Causes for the button to refresh properly to "Flagged..." however, the ng-disabled its not making the button disabled! In firebug its showing that the ng-disabled property is set:
ng-disabled="true"
you need to assign scope item as '&'
var app = angular.module('app', []);
app.directive('flagable', function() {
return {
restrict: 'E',
scope: { item: '&' },
templateUrl: 'flagable.tmpl',
controller: function($scope) {
$scope.flag = function()
{
$scope.item.userFlags = [];
};
}
};
});
app.controller('appController', function($scope){
$scope.item ={};
//$scope.item.userFlags = null;
});
and ng-disable should have value like this because item object is already present in controller
ng-disabled="item.userFlags != null
Working demo present here
http://plnkr.co/edit/zvO24fb082hiyeinWmQi?p=preview
HTML PAGE:
<html ng-app="app">
<head>
<link data-require="bootstrap-css#2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#2.3.2" data-semver="2.3.2" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="appController">
<h1>Hello Plunker!</h1>
<flagable item="item" flag="flag(item)"></flagable>
</body>
</html>
Controller and directive:
var app = angular.module('app', []);
app.directive('flagable', function() {
return {
restrict: 'E',
scope: { item: '=', flag: '&' },
templateUrl: 'flagable.tmpl'
};
});
app.controller('appController', function($scope){
$scope.item ={};
$scope.flag = function(item)
{
//call service to set flag here
item.userFlags = [];
};
});
template page
<div class="btn-group pull-right">
<button class="btn btn-small btn-danger" ng-disabled="item.userFlags != null"><i class="icon-flag"></i>
<any ng-switch="item.userFlags==null">
<any ng-switch-when="true">Flag</any>
<any ng-switch-when="false">Flagged...</any>
</any>
</button>
<button class="btn btn-small btn-danger dropdown-toggle" data-toggle="dropdown" ng-disabled="item.userFlags != null"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Inappropriate</li>
<li>Overpost</li>
<li>Spam</li>
</ul>
</div>