How can I make the ng-click behave like a ng-changed? Because every time I click the button it will send a data through AJAX. So the x.status value will changed.
This is my HTML
<button ng-click="status(x);" ng-switch="x.status">
<span ng-switch-when="orderer">SHOW</span>
<span ng-switch-when="orderer_hidden">HIDE</span>
<span ng-switch-when="creator">SHOW</span>
<span ng-switch-when="creator_hidden">HIDE</span>
</button>
The ng-switch will trigger only when I refresh the page.
UPDATED
This is the script
$scope.status = function(data){
$http({
method: "GET",
url: Ajax_call.ajaxurl,
params: {
id: data.id,
status: data.status,
action: "status_changed"
}
});
}
Related
I am writing a simple and test application in ASP.NET MVC5 and also using Angular JS.
I added Angular scripts and somehow 'ng' attributes in HTML tags aren't working.
For example, in the code below i want to call a function 'Add()' in 'ng-click' event. This doesn't seem to be working because clicking 'Add' button should have called the 'Add()' function and cleared-off the UI fields entered by the user.
$scope.Add = function() {
$http({ method: "POST", data: $scope.Customer, url: "Submit" }).
success(function (data, status, headers, config) {
$scope.Customer =
{
"CustomerCode": "",
"CustomerName": "",
"CustomerAmount": "",
"CustomerAmountColor": ""
};
}
);
}
<input id="Btn" type="button" value="Add customer" ng-click="Add()" />
did you add the js controller which has the function, in your HTML?
This question already has an answer here:
Add boolean checkboxes ng-model to object AngularJS
(1 answer)
Closed 4 years ago.
I am trying to add a checkboxes in ng-repeat, and then post with $http checked values.
Here is my code :
$scope.add_to_post = function(n){
console.log("name",n);
$http({
method: 'POST',
url: url,
data: $.param({
name: n,
}),
withCredentials: true,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
})
.then(function successCallback(data) {
console.log('post');
}, function errorCallback(response) {
console.log(response);
console.log('error');
});
};
HTML:
<div >
<ul ng-repeat="x in messages" style="list-style:none;">
<li>
{{x.name}}
<input type="checkbox" ng-click="add_to_post(x.name)"/>
</li>
</ul>
<button ng-click="post()">post</button>
I want option that I check some checkboxes, then I click post and $http calls are running.
My plunker : http://next.plnkr.co/edit/zPu9DH0JyinlBvLh
Thanks for answers and help in advance!
In your controller you can create an object for storing the models (ng-model) for your checkboxes like this:
$scope.modelCheck = {};
then in the html you can bind them like this:
<input type="checkbox" ng-model="modelCheck[x.name]"/>
finally, when you are going to do the POST collect the check boxes name which where marked as true like this:
$scope.post = function(){
var data = [];
for (var k in $scope.modelCheck) {
// `k` is own property (checkbox name) and its value is `true`
if ($scope.modelCheck.hasOwnProperty(k) && $scope.modelCheck[k]) {
data.push({'name': k});
}
}
console.log(data);
// do with data as you wish from here
};
See this Forked working plunker (see the console)
I am creating some divs using ng-repeat.
See code below :
.controller('meditationsController', function ($scope, $state, $rootScope, $http) {
var req = {
method: 'POST',
url: 'http://example.com/demo/',
headers: {
'Content-Type': 'application/json'
}
}
// Call API
$http(req).then(function(result) {
var rawData = result.data;
$scope.meditationByCategory = {};
for (var i = 0; i < rawData.length; i++) {
var meditation = rawData[i];
if ($scope.meditationByCategory[meditation.main_title] == undefined) {
$scope.meditationByCategory[meditation.main_title] = {};
$scope.meditationByCategory[meditation.main_title].name = meditation.main_title;
$scope.meditationByCategory[meditation.main_title].meditations = [];
}
$scope.meditationByCategory[meditation.main_title].meditations.push(meditation);
}
});
})
<div ng-repeat="(categoryName, category) in meditationByCategory">
<div class="peacefulness"><p class="para-text">{{category.name}}</p></div>
<a href="" ng-click="goToDetailPage()" class="customlink">
<div class="item-content" ng-repeat="meditation in category.meditations">
<span class="leftSpanStyle">{{meditation.title}}</span>
<span class="rightSpanStyle">
<i class="icon ion-ios-information-outline icon-size"></i>
</span>
</div>
</a>
</div>
I have successfully created the list of divs dynamically according to service response.
Now i want to apply click to each div. and the data that i am getting in service response want to bind the next page. I mean the data on the next page will be dynamic and depend upon cliked div.
please help me to bind the data into another page..
Add a button to your view. Something like:
<span class="rightSpanStyle">
<i class="icon ion-ios-information-outline icon-size"></i>
</span>
<button ng-click="doSomeThing($index)"></button>
And in your controller:
$scope.doSomeThing = function(index){
//do something with category.meditations[index]
//or go to another state: $state.go("myState", {item: category.meditations[index]})
}
Edit:
As you say "want to bind to next page" I assume that you want to navigate to another page. Assuming also that you do so by using angulars ui-router, that means that you want to change state. In that case don't forget to define:
url: /myUrl/:item
for that state in question. You can access the item in the target state / controller with $stateParams.item
I'm writing a small test application where I can retrieve my customers from a parse.com database.
I have the following form in html
...
<body ng-app="myApp">
<div ng-controller="CustomerController">
<button ng-click="getCustomers()">Get customers</button>
<ul>
<li ng-repeat="customer in customers">{{ customer.name }}</li>
</ul>
</div>
</body>
...
My angular app is the following:
Module
var app = angular
.module('myApp', ['ngResource'])
.constant('myConfig', {
'api_url': 'https://api.parse.com/1/classes/',
'parse_application_id': 'xxxxxxxxxxxxx',
'parse_rest_api_key': 'xxxxxxxxxxxxx'
});
Factory
app.factory('CustomersService', function($resource, myConfig) {
return $resource(myConfig.api_url + 'Customer', {}, {
query: {
method: 'GET',
isArray: false,
headers: {
'X-Parse-Application-Id': myConfig.parse_application_id,
'X-Parse-REST-API-Key': myConfig.parse_rest_api_key
}
},
create: {
method: 'POST',
headers: {
'X-Parse-Application-Id': myConfig.parse_application_id,
'X-Parse-REST-API-Key': myConfig.parse_rest_api_key
}
}
})
});
Controller:
app.controller('CustomerController', function($scope, CustomersService, CustomerService) {
$scope.getCustomers = function() {
CustomersService.query().$promise.then(function(result) {
$scope.customers = result.results;
});
};
});
So when I click my button, everything works like it should.
But I also want to add a filter by name when I want to retrieve customers from the database.
When I execute the following in Postman
https://api.parse.com/1/classes/Customer?where={"name":"aaaaa"}
this works and only gets the customer with the name "aaaaa". So I know that the syntax is OK.
So I will add a textbox where the user can enter a customername and after that I want to click on the search button.
But how can I manage the ?where={"name":"aaaaa"} into the angular stuff when I click the button? I also want to expand the filter with other columns from that customer.
Something like this should work (assuming everything goes in the where object)
Add some search fields that bind to a scoped object's properties. We'll call it search
<label for="search_name">Name</label>
<input type="text" ng-model="search.name" name="name" id="search_name">
<label for="search_city">City</label>
<input type="text" ng-model="search.city" name="city" id="search_city">
Then you can execute the query action with
CustomersService.query({where: $scope.search}).$promise...
That should create a query param like
?where=%7B%22name%22%3A%22aaaaa%22%2C%22city%22%3A%22London%22%7D
which is the URI encoded value
?where={"name":"aaaaa","city":"London"}
I'm using AngularJS and can't find way to resolve this Issue:
there is part from my controller:
$scope.$on('showMoreNotifications', function (event) {
$.ajax({
url: '/notifications',
data: {
notificationCount: 30
},
success: function (e) {
$scope.notifications = e.Messages;
}
});
});
and here is html which using this controller:
<div class="widget" id="widget-notifications" ng-controller="NotificationsCtrl">
<span class="title" ng-click="$parent.$broadcast('showMoreNotifications')">#*showMoreNotifications()*#
Notifikace
</span>
<div class="messages">
<div ng-repeat="item in notifications" class="message-item type-{{item.Entity}}" data-id="{{item.AuditLogId}}">
<span class="type"></span>
<div class="description">
<span class="date">{{item.Date}}</span> / {{item.Message}}
</div>
</div>
</div>
</div>
If I click on span class title on top, controller right call to server and receives JSON data. Unfortunately dont refresh html which is associated with it. When I click second time, html refresh data from first request.
Your template is not updating since your are making xhr calls using jQuery. Those calls are considered "outside of AngularJS" world so AngularJS is not aware of them and doesn't know that it should start it automatic refresh cycle.
You would be much better using excellent $http service from AngularJS to make xhr calls. You would write something like:
$http('/notifications', {params : {
notificationCount: 30
}}).success(function (e) {
$scope.notifications = e.Messages;
});
There was a similar question where the answer helps migrating from jQuery's $.ajax to AngularJS $http: https://stackoverflow.com/a/12131912/1418796
Next, something not directly related, but you really don't have to broadcast events to react on the click event. It would be enough to write:
<span class="title" ng-click="myClickHandler()">
#*showMoreNotifications()*#
Notifikace
</span>
and then in your controller:
$scope.myClickHandler = function(){
//call $http here
}
Now I resolved my issue... It needs apply on scope
like this:
$.ajax({
url: Escudo.UrlHelper.baseUrl + 'Widgets/Notifications/GetLastNotifications',
data: {
notificationCount: 30
},
success: function (e) {
$scope.$apply(function () {
$scope.notifications = e.Messages;
});
}
});