Here when i click on cartDetails the dynamic scope variable x.SmId value need to be passed to the bellow function and in alert box need to display the parameter .How can we do this one in angular js?
<div ng-app="" ng-controller="MyCtrl">
<div ng-repeat="x in names">
<div ng-click="cartDetails('{{x.SmId}}')">
<div>{{x.name}}</div>
</div>
</div>
</div>
<script>
angular.module('MyApp', [])
.controller('MyCtrl', ['$scope', '$http', function($scope, $http) {
$scope.search = function(param) {
$http.get('AngularJs-Response.jsp?mid='+param).success(function(response) {
$scope.names = response;
});
};
$scope.cartDetails = function(smid) {
alert(smid);
};
}]);
</script>
Use simple:-
ng-click="cartDetails(x.SmId)"
I tried to use:
ng-click="cartDetails(x.SmId)"
but it simply x.SmId as string, its not replaced by value. After reading few more articles, I found a solution like below:
<div ng-click="cartDetails('{{x.SmId}}')">
Its a working solution in AngularJS v1.3.9
Related
In my MVC program simple angular value controllers values are not binding.
My code is as follows :
_Layout.cshtml
<body data-ng-app="ShoppingCartApp">
<div class="container body-content">
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/Scripts/angular.js")
#Scripts.Render("~/Scripts/Custom/App.js")
#Scripts.Render("~/Scripts/Custom/ShoppingCartController.js")
#RenderSection("scripts", required: false)
<hr />
</div>
</body>
App.js
var app = angular.module('ShoppingCartApp', []);
ShoppingCartController.js
app.controller('ShoppingCartController', function ShoppingCartController($scope, $http) {
$scope.ShoppingCartObj.products = [];
$scope.test = "ABC";
// On load events
// $scope.loadValues();
});
My Html Code is follows :
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script></script>
<h2>Index</h2>
Total {{2+2}} // This value workd FINE
<div ng-controller="ShoppingCartController">
<div class="row">
<div class="nav navbar-nav navbar-left">
<h3>Total {{2+2}}</h3> // Not working THIS
</div>
<h1>{{test}}</h1> // Not working THIS
</div>
</div>
When i try to access value in controller or access directive inside controller it's not working. What i miss in here?
Change your controller to:
app.controller('ShoppingCartController', function($scope, $http) {....});
Or create a function named ShoppingCartController and then pass it to controller:
app.controller('ShoppingCartController', ShoppingCartController);
Also change $scope.ShoppingCartObj.products to $scope.ShoppingCartObj = {}; and then add products to that object $scope.ShoppingCartObj.products = []; because, prev you havnt defined what $scope.ShoppingCartObj is, so this object will be undefined.
If you're using Bundler you need to specify the Dependency Injection values
Also - ShoppingCartObj isn't declared anywhere so you can't assign to a property products
app.controller('ShoppingCartController', ['$scope', '$http',
function ShoppingCartController($scope, $http) {
$scope.ShoppingCartObj = {},
$scope.ShoppingCartObj.products = [];
$scope.test = "ABC";
}]);
Here's a working Jsfiddle
I have made the following plunker:
https://plnkr.co/edit/Ff2O2TGC4WLaD62fJmvA?p=preview
I would like the value of the input to be the item.name clicked.
Here is the code:
<body ng-app="myApp">
<div ng-controller="MyController">
<ul ng-repeat="item in collection">
<li ng-click="edit('{{item.name}}')">{{item.name}}</li>
</ul>
</div>
<input name="myinput" ng-model="myinput" />
</body>
Js:
var app = angular.module('myApp', [])
.controller('MyController', function($scope, $http) {
$scope.collection = [
{name:'foo'},
{name:'bar'},
{name:'foobar'},
{name:'barfoo'},
];
$scope.edit = function(current_name) {
this.myinput = current_name;
console.log(current_name);
}
})
So there are a few problems here. The first is how you're passing item.name into the edit function. Instead of edit('{{item.name}}') it should simply be edit(item.name).
The next is this.myinput in the script.js isn't going to work; it needs to be $scope.myinput.
Finally, the input in the markup needs to be inside the div that defines the controller.
I've modified the Plunkr to work: https://plnkr.co/edit/mslpklTaStKEdo64FpZl?p=info
Angular expression can't have interpolation tags. Correct syntax, like if it was normal Javascript:
<li ng-click="edit(item.name)">{{item.name}}</li>
You don't have to call a function. Just do.
<li ng-click="$parent.myinput = item.name">
There is <ul> <li>..</li> </ul> tag which contains a product description.
I used ngSanitize dependency but it did not work. I also tried ng-bind-html, $sce.trustAsHtml() but it is not working. Result is rendering the tag itself as string like <ul><li>something</li></ul>
I am using angular 1.4.
On browser console it is printing like:
<ul><li>Experience subject to availablity</li>
And on HTML page it is printing like:
<ul> <li> Experience subject to availablity</li>......
First I tried sanitize dependacy with html-bind-unsafe
var app = angular.module('frogo-app', ['ngAnimate', 'ui.bootstrap','ngRoute', 'ngSanitize']);
app.controller('contactController', function($scope, $http, myservice) {
$scope.ysk = data from server;
......
}
HTML
<div ng-bind-html="ysk"></div>
Secondly I tried
app.controller('contactController', function($scope, $http, $sce, myservice) {
$scope.ysk =$sce.trustAsHtml($scope.you_should_know);
......
}
HTML
<div ng-bind-html="ysk"></div>
Third I tried
app.filter('unsafe', function($sce) { return $sce.trustAsHtml;});
HTML
<div ng-bind-html="ysk | unsafe"></div>
I use this filter :
/**
* to interpret html code in the view ( otherwise it display the code without interpret it )
*
* usage : <span ng-bind-html="value | unsafe"></span>
*/
var interfaceApp = angular.module('interfaceApp', []);
interfaceApp.filter('unsafe', function ($sce) {
return function (val) {
return $sce.trustAsHtml(val);
};
});
and call it the html view like this :
<span ng-bind-html="value | unsafe"> </span>
value is the data you want to disply contenaing html tag
I could be totally wrong but it sounds like you are trying to evaluate a string containing HTML from a database query and render it as html...
You would want to do something like this:
In your template:
<div ng-controller="MyCtrl">
Hello, {{name}}!
<div ng-bind-html="my_html | to_trusted"></div>
</div>
And in your js/controller:
var myApp = angular.module('myApp',[]);
angular.module('myApp')
.filter('to_trusted', ['$sce', function($sce){
return function(text) {
return $sce.trustAsHtml(text);
};
}]);
function MyCtrl($scope) {
$scope.name = 'Superhero';
$scope.my_html = '<label><b>Hello </b> <input type="text" value="world !"> </label>';
}
Some from your pseudo-code above with $scope.ysk you would use something like this in your template:
<li><span ng-bind-html="ysk | to_trusted"></span></li>
I'm new to AngularJS. I'm implementing ng-keypress events in AngularJS.
I referred to many blogs and tried to do as it is shown, but my code is not working!
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<input ng-keypress="change($event)" type="text" >
{{ text }}
</div>
</div>
script is:
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
$scope.change=function($event){
$scope.text= 'a';
};
}]);
I'm trying to change the value of {{text}} on keypress.. but it's not working!
can anyone help me out!
Thanks :)
i tried the same things and its working
<body ng-controller="MainCtrl">
<input ng-keypress="change($event)" type="text" >
<pre>{{name}}</pre>
</body>
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.change=function($event){
$scope.name= 'hello';
};
});
checkout this plunker... PLUNKER LINK
EDIT
checkout your code plunker.. thats also working
EDIT
finally the answer is: 1.0.7 does not support ng-keypress, hence it was not working..
sometimes ng-keypress do not work on some browsers !!
i had the issue with the arrow keys in chrome
try ng-keydown instead (it worked for me )
As everyone else says it's working as it is supposed to do. Perhaps you want something like this?
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
$scope.text = '';
$scope.change=function($event){
$scope.text += String.fromCharCode($event.keyCode);
};
}]);
I am trying to use div with ng-click for routing:
ng-click="go('/item/{{item.id}}').
I can call $parent.go or even go when using ParentCtrl. But ParentCtrl_2 does not work at all. I tried to look for some answers, but can't figure it out. What am I missing?
app.controller('ParentCtrl', function($scope) {
$scope.go = function(path) {
console.log(path);
}
}
);
app.controller('ParentCtrl_2', ['$scope', '$location',
function($scope, $location) {
$scope.go = function(path) {
$location.path(path);
}
}
]);
app.controller('ChildCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
...
}
]);
There are number of unanswered questions here but, like what is the structure of your html ng-controller structure.
Also the call sytax in html is wrong for
ng-click="go('/item/{{item.id}}')
It should be
ng-click="go('/item/'+ item.id)"
Said that depending on where the ng-click is declared it would have access to parent methods. If you can access a method using $parent then you can access the method directly due to prototypal inheritance.
If structure is like
<div ng-controller='ParentCtrl'>
<div ng-controller='ParentCtrl_2'>
<div ng-controller='ChildCtrl'>
<!-- ng-click somewhere here -->
</div>
</div>
</div>
Then you access the ParentCtrl_2 method go whenever you call.
If it is
<div ng-controller='ParentCtrl'>
<div ng-controller='ParentCtrl_2'>
</div>
<div ng-controller='ChildCtrl'>
<!-- ng-click somewhere here -->
</div>
</div>
Then you have access to ParentCtrl method go method only.