I am a newbie in angularjs and needs to pass a model bind value in a function which is declared in controller but when I accesss that value from controller it says undefined. Below is the code
HTML:
<div>
<p g-bind-template>{{model.myname}}</p>
<div>
<div data-ng-controller="formCtrl" data-ng-init="init(model.myname)"></div>
</div>
</div>
In the above HTML when i do {{model.myname}} I can see the value but how to pass it in init method.
In Controller I have wrote a function
$scope.init = function (myname) {
alert(myname) // displays undefined
};
Your paragraph tag should be within the ng-controller in html. Make it like this:
<div>
<div>
<div data-ng-controller="formCtrl" data-ng-init="init(model.myname)">
<p g-bind-template>{{model.myname}}</p>
</div>
</div>
</div>
Related
This is my situation in psuedo code
<div data-ng-controller="test">
<div isolated-directive>
<select ng-model="testControllerScopeVar">...</select>
</div>
<div ng-if="some condition that uses testControllerScopeVar"></div>
</div>
This worked perfectly before I added isolated-directive, now that it is added (scope: true) the ng-if no longer works because I think it is getting eat up inside of the directive.
What is the most efficient way to get this working without touching the structure of the html and isolated-directive?
Well it seems once I know the solution, it is so simple
<div data-ng-controller="test as testCtrl">
<div isolated-directive>
<select ng-model="testCtrl.testControllerScopeVar">...</select>
</div>
<div ng-if="testCtrl.testControllerScopeVar == 'whatever'"></div>
</div>
ControllerAs allows me to specifically access the right scope and works perfectly, thanks all for your time and input
One approach is to map the controller variable into your isolated scope and attach the isolated scope variable to your internal ng-model.
So your HTML would look like this:
<div data-ng-controller="test">
<div isolated-directive="testControllerScopeVar">
<select ng-model="isolatedScopeVar">...</select>
</div>
<div ng-if="some condition that uses testControllerScopeVar"></div>
</div>
And your directive declaration would look like this:
app.directive('isolatedDirective', function () {
return {
scope: {
isolatedScopeVar: '=isolatedDirective'
}
};
});
You can try jQuery to get the value and assign it to a new scope variable. Something like this
HTML
<div ng-app="TestApp">
<div data-ng-controller="test">
<div isolated-directive>
<input id="isolatedVar" ng-model="testControllerScopeVar" />
</div>
<div>
{{isolatedVar}}
</div>
</div>
</div>
JS
var app = angular.module('TestApp', []);
app.controller('test', function($scope) {
var element = angular.element(document.querySelector('#isolatedVar'));
element.bind('keyup', function() {
$scope.isolatedVar = element.val();
console.log($scope.isolatedVar);
$scope.$watch('isolatedVar', function() {});
});
});
app.directive('isolatedDirective', function() {
return {
scope: true
};
});
Working fiddle https://jsfiddle.net/kavinio/yzb8ouzd/1/
In my program I have an Array which consists of header name and function name.
I am using ng-repeat in a div which consists of a span tag. I want to add different functionality for each iterated span so I stored function name in array.
my html code is:
<div ng-repeat="header in header" ng-init="head=header">
<h4 class="headers">{{ header.name}}</h4>
<div class="arrow-up" ng-show={{ header.arrowup}} ng-click={{header.close}}> </div>
</div>
my angular code is:
$scope.header=[{"name":"Subsection Header #1","arrowup":"arrowup","close":"close()"}];
$scope.close = function() {
console.log(hello);
};
I want to assign close() to the ng-click and arrowup to ng-show. How can I assign them to ng-click and ng-show
change:
<div class="arrow-up" ng-show={{ header.arrowup}} ng-click={{header.close}}>
To:
<div class="arrow-up" ng-show="header.arrowup" ng-click="this[header.close]()">
<button>
CLOSE ME
</button>
</div>
DEMO= http://jsfiddle.net/Lvc0u55v/1788/
ng-click is the problem as i see,
<div class="arrow-up" ng-show="header.arrowup" ng-click="header.close"></div>
we need not give {{}} to ng-click and ng-show.
hope it helps.
First you need to pass a real functions to array:
function arrowUp(){
// ng-show needs to receive true or false
return true;
}
function close(){
// do something here
}
$scope.headers=[{"name":"Subsection Header #1","arrowup":arrowUp,"close":close}];
The bind them in a view:
<div ng-repeat="header in headers">
<h4 class="header">{{ header.name}}</h4>
<div class="arrow-up" ng-show="header.arrowup()" ng-click="header.close()"> </div>
</div>
You need to use the $eval method, you can read more about it here
$scope.$eval Executes the expression on the current scope and returns the result. Any exceptions in the expression are propagated (uncaught). This is useful when evaluating Angular expressions
HTML:
<div ng-controller="TestController">
<div ng-repeat="header in headers">
<h4>{{ header.name}}</h4>
<button type="button" ng-click="onExecuteFunctionFromString(header.close)">Click Here</button>
</div>
</div>
JS:
var myApp = angular.module('myApp', []);
myApp.controller('TestController', ['$scope', function($scope) {
$scope.headers = [{
"name": "Subsection Header #1",
"arrowup": "arrowup",
"close": "close()"
}];
$scope.close = function() {
console.log('hello');
};
$scope.onExecuteFunctionFromString = function(stringFunction) {
$scope.$eval(stringFunction)
};
}]);
Please see working example here
Hi I have following data i get using factory in angular.
$scope.data=[{actId:12, acctName: "Tom James"}, {acctId:20, acctName: "Lisa Anderson"}]
In my html code I am using ng-repeat to display just the name.
<div ng-repeat=" record in data">
<div>{{record.acctName}}</div>
<div><button ng-click="getDetails(record)">Get Details</div>
</div>
In my controller I have
$scope.getDetails=function(record)
{
alert(record.actId)
}
In my controller I am trying to see if acctId is passed I get undefined error. Please let me know how I can pass the current record with all of its fields.
Thanks
There is spelling mistake use record.actId insted of record.acctId
If you want to get actId then you have to pass actId in getDetails function.
<div ng-repeat=" record in data">
<div>{{record.acctName}}</div>
<div><button ng-click="getDetails(record.actId)">Get Details</div>
</div>
in Controller
$scope.getDetails=function(actId)
{
alert(actId);
}
If you want to pass both accName and actId then here is the code for do this:-
<div ng-repeat=" record in data">
<div>{{record.acctName}}</div>
<div><button ng-click="getDetails(record.acctName,record.actId)">Get Details</div>
</div>
In Controller
$scope.getDetails=function(acName,actId)
{
alert(acName);// this is for name
alert(actId); //For Id
}
I am trying to toggle a div on button click like as bellow.
This is working.
<div>
<button ng-click='x = ! x'>toggle</button>
</div>
<div ng-include="'pages/include/search.html'" ng-show='x'></div>
This is not working.
<div ng-if="$state.current.url!='/splash'" >
<button ng-click='x = ! x'>toggle</button>
</div>
<div ng-include="'pages/include/search.html'" ng-show='x'></div>
Why it is not working, when I add ng-if="$state.current.url!='/splash'" ?
Well,
Every angular directive create new scope
In the code below
<div ng-if="$state.current.url!='/splash'" >
<button ng-click='x = ! x'>toggle</button>
</div>
<div ng-include="'pages/include/search.html'" ng-show='x'></div>
The ng-if directive create new scope.And withing this scope
the value of x is updated on button click.But this new value of x is not accessible outside this ng-if div as it is local to that scope and it is primitive type.
Since this x is primitive type so there is no data update as reference are differant.
You should use object model instead.
Here is the updated HTML
<div ng-if="$state.current.url!='/splash'" >
<button ng-click='x.showHide = ! x.showHide'>toggle</button>
</div>
<div ng-include="'pages/include/search.html'" ng-show='x.showHide'>This is div</div>
define x like this one in your controller.
$scope.x = {showHide:false}
EDIT-
In your first woking HTML, there is not directive on div.So, both these DIV come under same scope.So,x accessible across this two DIV with updated value.
<div>
<button ng-click='x = ! x'>toggle</button>
</div>
<div ng-include="'pages/include/search.html'" ng-show='x'></div>
I'm just starting out with AngularJS and have hit a really simple snag that I just can't seem to get past. All I want to do is initialize some values when the page loads. It doesn't happen.
Here's the code:
var bookingAppModule = angular.module('bookingApp', []);
bookingAppModule.controller('bookingController', ['$scope', function ($scope) {
$scope.bookingDate = '2014/04/28';
$scope.alertMessage = "initialized";
}]);
</script>
<div id ="booking-app" ng-app="bookingApp"">
<div >
{{bookingDate}}<br />
<input type="date" ng-model="bookingDate" />
<br />
{{alertMessage}}
</div>
</div>
What am I missing here? BTW, I also tried putting an init() function on the controller and using ng-init= "init()", but that doesn't work either. I can initialize the values using ng-init ="bookingDate= ...", but that is not what I want.
Put the ng-app attribute in the HTML tag. Reference ng-controller in the booking-app div like this:
<div id ="booking-app" ng-controller="bookingController"">