I want get the angularjs hidden field value without any button action. I'm new in angularjs if any link available for this solution please send to me
Code given below
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController">
<input type="hidden" name="id" ng-model="id" ng-init="id=12"></input>
</div>
<script>
function TestController($scope) {
alert($scope.id);
}
</script>
Problem is, in controller alert is invoked before ng-init get set,
try this,
app.controller('myController', function($scope,$timeout) {
$timeout(function() {
alert($scope.id);
})
});
DEMO
It seems that the problem is that the alert(...) call is executed before the id variable is initialized.
This seems to work
function TestController($scope, $timeout) {
$timeout(function(){alert($scope.id);},0, true);
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController">
<input type="hidden" name="id" ng-model="id" ng-init="id=12">
</div>
You can create init function and observe via $watch
function TestController($scope) {
this.init = function() {
$scope.id = 12;
$scope.$watch('id', function(value, oldValue) {
console.log('changed', $scope.id)
});
console.log('id has been initialized');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="vm.init()" ng-controller="TestController as vm">
<input type="hidden" name="id" ng-model="id">
<input type="text" placeholder="just test input" name="other" ng-model="id">
</div>
Related
My angular js code is not resolving the placeholders ,while I am trying to get it resolved on runtime.
Js code :
var message ={s:"hello {{name}}"};
angular.module("myapp",[]).controller("myctrl", function($scope){
var ctrl=this;
$scope.name="david";
$scope.w=message.s;
$scope.call=function(){
//alert(message);
};
});
HTML :
<div ng-app="myapp">
<div ng-controller="myctrl as ctrl">
{{w}}
<input type="text" ng-model="ctrl.name" />
<input type="submit" ng-click="call();" />
</div>
</div>
Expected output is :hello david;
Attaching fiddle link :https://jsfiddle.net/rakotkar/o46coezd/2/
You are mixing up controller as syntax and $scope. When you are using controller as syntax , you have to use this keyword instead of $scope.
JS
var message ={s:"hello "};
angular.module("myapp",[]).controller("myctrl",function(){
var ctrl = this;
ctrl.name ="david";
ctrl.w = message.s;
ctrl.call = function(){
//alert(message);
};
});
HTML:
<div ng-app="myapp">
<div ng-controller="myctrl as ctrl">
{{ctrl.w}}{{ctrl.name}}
<input type="text" ng-model="ctrl.name" />
<input type="submit" ng-click="call();" />
</div>
</div>
Demo:https://jsfiddle.net/o46coezd/4/
For more info on controller as syntax:AngularJs "controller as" syntax - clarification?
You can try like below. As you're trying to access scope from outside module, it's not possible I think.
<!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">
<div ng-controller="myctrl as ctrl">
{{w}}
<input type="text" ng-model="ctrl.name"/>
<input type="submit" ng-click="call();"/>
</div>
</div>
<script>
var message ={s:"hello"};
angular.module("myapp",[]).controller("myctrl", function($scope){
var ctrl=this;
$scope.text = message;
$scope.name="david";
$scope.w= $scope.text.s + ' ' + $scope.name;
$scope.call=function(){
//alert(message);
};
});
</script>
</body>
</html>
Upon pressing add button in myform, I want to get the value in the input Name using ng-model. I am using append in my form to add the next column.
However, I am facing issues in achieving this through the code below
function add(){
var stre;
stre="Name: <input type='text' ng-model='Name'><br>"
+"Result Name: <input type='text' value={{Name}}>"
$("#test").append(stre);
}
<!DOCTYPE html>
<html ng-app>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div id="test">
<button type="button" onclick="add()">add</button><br>
</div>
</body>
</html>
Use ng-repeat instead of append
The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item.
var myApp = angular.module('myApp', []);
myApp.controller('myController', myController);
function myController($scope) {
$scope.elements = [];
$scope.add = function() {
$scope.elements.push({});
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller='myController'>
<div id="test">
<div ng-repeat='elem in elements'>
Name:
<input type='text' ng-model='elem.name'>
<br>Result Name:
<input type='text' value={{elem.name}}>
<hr>
</div>
<button type="button" ng-click="add()">add</button>
</div>
</div>
</div>
Fiddle here
Ok, so I'm pretty sure I'm missing something obvious, but I'm not seeing it.
I created a fiddle that I would have thought would throw an alert message when the input box loses focus, but it's not working and I don't know why.
I was expecting an alert message when the user performs the following steps:
click the input box
type something
click somewhere outside of the input box
but these steps do not show an alert message.
Surely, someone knows what I'm doing wrong...?
Here's the code (same as the fiddle):
<div ng-app>
<div ng-controller="MyCtrl">
<form name="myForm">
<input type="text" ng-model="todoText" size="30"
name="myInput" ng-blur="validate(myForm)">
</form>
</div>
</div>
function MyCtrl($scope) {
$scope.validate = function(form) {
alert('blur!');
};
}
It could be your version of angular. Your fiddle is using 1.0.x I updated you to 1.4.x and its working fine:
<div ng-app='myApp'>
<div ng-controller="MyCtrl">
{{santity}}
<form name="myForm">
<input type="text" ng-model="todoText" size="30"
name="myInput" ng-blur="validate(myForm)">
</form>
</div>
</div>
Javascript
angular.module('myApp', []);
angular.module('myApp').controller('MyCtrl', MyCtrl);
function MyCtrl($scope) {
$scope.santity = 'Hello';
$scope.validate = function(form) {
alert('blur!');
};
}
http://jsfiddle.net/ncapito/LurjLvz7/6/
My controller is the following:
myApp.controller('actionEditController', ['$scope', '$stateParams', '$sce',function ($scope, $stateParams, $sce) {
$scope.table="<p>OOPSY</p>";
$scope.test="<p>TEST</p>";
$.get(apiHost + "/action/entity/" + $stateParams.id)
.success(function (response) {
var action = response['RESPONSE'];
action.params = JSON.parse(action.paramsJson);
$scope.$apply(function () {
$scope.table = $.hbs("/templates/action.hbs", action);
});
console.log(" table is "+$scope.table);
})
.error(function (jqXHR, textStatus, errorThrown) {
console.error("Error retrieving action");
});
}]);
The output of console.log(table) is:
<div>
<input name="name" type="text" value="EXPIRY_SM00004_BROWSED"/>
<input name="id" type="text" readonly="readonly" value="AC0000E1"/>
<input name="type" type="text" readonly="readonly" value="SCHEDULE"/>
<input name="priority" type="text" value="LOW"/>
<input name="eventName" type="text" value="expiry.SM00004.browsed"/>
<input name="space" type="text" value="hybrid"/>
<input name="at" type="number" value=59400000/>
<input name="on" type="number" value=172800000/>
</div>
<script src="lib/angular/angular-sanitize.min.js"></script>
My html file:
<div ng-app="broConsoleApp" ng-controller="actionEditController" >
<h2 class="marcellus text-center"> EDIT ACTION </h2>
<div ng-bind-html="table">
</div>
<div ng-bind-html="test"></div>
</div>
The test is getting printed however table is not getting printed. I think it is because of some new line characters in the output? I tried replacing them with :
$scope.table.replace(/\n/g,''))
However I am still not getting an output for table. Someone please help me in formatting this rendered output just right so that ng-bind can bind it.
I don't think there is any thing wrong with the html with regards to special characters etc. I am begining to think ngBindHtml cannot handle this at all.
PLease check the plunker: http://plnkr.co/edit/PcAUERYziJtw0k1f1XjT?p=preview
I took the plunker from angular JS and modified it to add just one of the input buttons in your html and it does not render.
$scope.myHTML =
'I am an <code>HTML</code>string with ' +
'links! and other <em>stuff</em>' +
'<input name="name" type="text" value="EXPIRY_SM00004_BROWSED"/>';
it seems to be working with $sce.trustAsHtml :
view:
<div ng-app="app" ng-controller="Ctrl">
<div ng-bind-html="table"></div>
<div ng-bind-html="test"></div>
</div>
js:
angular.module('app', [])
.controller('Ctrl', function($scope, $sce) {
$scope.table = $sce.trustAsHtml('<p>this is a test</p>');
$scope.test = $sce.trustAsHtml('<h3>TEST</h3>');
});
working example: https://jsfiddle.net/r646z10y/1/
I am trying to learn angular so forgive my stupid mistakes and ignorance. That being said,
I add data to my scope when I create my controller ProducerCtrl. This works before I add anything else. When I add the addname function it breaks my data fetch. I am sure I am doing something wrong because I don't know what I am doing. I would like to have these
two bits of code work. Maybe I need to move one or both to another area.
<html><head>
<title></title>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<script>
var eventApp = angular.module('eventApp', []);
var szAction = "/GoGetData";
var szAction2 = "/GoPostData" })";
eventApp.controller('ProducerCtrl', ['$scope', '$http', function (scope, http) {
http.get(szAction).success(function (data) {
scope.producer = data;
});
$scope.addName = function () {
http.post(szAction2, scope.producer);
};
}]);
</script>
</head>
<body>
<div ng-app="eventApp">
<div ng-controller="ProducerCtrl">
Name:<input ng-model="producer.Name" type="text" /><br>
Hello {{producer.Name}}
<form ng-submit="addName()">
<input ng-model="producer.Name" type="text">
<input type="submit" value="add">
</form>
</div>
</div>
</body></html>
I've made some changes on your code. When you click on add will prompt an alert.
Your HTML:
<body>
<div ng-app="eventApp">
<div ng-controller="ProducerCtrl">
Name:<input ng-model="producer.Name" type="text" /><br />
Hello {{producer.Name}}
<form ng-submit="addName()">
<input ng-model="producer.Name" type="text" />
<input type="submit" value="add" />
</form>
</div>
</div>
<body>
Your Angular code:
var eventApp = angular.module('eventApp', []);
eventApp.controller('ProducerCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.producer = { Name : '' };
$scope.addName = function () {
alert($scope.producer.Name);
};
}]);
See here.
Take a look here to check $http.