this is what I have in my model
// The contents of individual model .js files will be concatenated into dist/models.js
(function() {
// Protects views where angular is not loaded from errors
if ( typeof angular == 'undefined' ) {
return;
};
var module = angular.module('myModel', ['restangular']);
module.factory('myRestangular', function(Restangular) {
return Restangular.withConfig(function(RestangularConfigurer) {
RestangularConfigurer.setBaseUrl('http://localhost/data');
RestangularConfigurer.setRequestSuffix('.json');
RestangularConfigurer.setRestangularFields({
id: "my_id"
});
});
});
})();
this is fine. but now I have another json that I need to grab data from. How could I change this model to look for that other json as well. I am very very new to angular and still learning how model data binding works!
*This is what I have tired *
my model
var module = angular.module('FloorModel', ['restangular']);
module.factory('FloorRestangular', function(Restangular) {
return Restangular.withConfig(function(RestangularConfigurer) {
RestangularConfigurer.setBaseUrl('http://localhost/data/floor');
RestangularConfigurer.setRequestSuffix('.json');
RestangularConfigurer.setRestangularFields({
id: "floor_id"
});
});
});
**my controller**
myApp.controller('FloorCtrl', function ($scope, $filter, FloorRestangular) {
// Fetch all objects from the local JSON (see app/models/mdpocket.js)
FloorRestangular.all('floor').getList().then( function(floors) {
// Then select the one based on the view's id query parameter
$scope.floor = $filter('filter')(floors, {floor_id: steroids.view.params['id']})[0];
});
// -- Native navigation
steroids.view.navigationBar.show("Floor: " + steroids.view.params.id );
});
*my view *
<div ng-app="myApp">
<div ng-controller="FloorCtrl">
<div class="topcoat-list__container">
<ul class="topcoat-list">
<li class="topcoat-list__item" hm-tap="open(floor.floor_id)" ng-repeat="floor in floors">
Floor Name: {{ floor.name }}
</li>
</ul>
</div>
</div>
</div>
Related
In the following script, I am able to get the first letter of string using anularJS.
var app = angular.module('myapp',[]);
app.controller('myCtrl',function($scope) {
$scope.myString = "kashif Riaz";
$scope.slicedString = $scope.myString.slice(0,1);
});
<div ng-app="myapp" ng-controller="myCtrl">
{{slicedString}}
</div>
But Actually my data is coming from database , and here i am unable to get the first letter of string ( which are contact Names).
here is an example of my approach.
app.controller("myCtrl",function($scope,$http) {
$http.post(
"names.php",
{'id':$scope.id}
).then(function(response) {
$scope.names = response.data;
$scope.fLetter = $scope.names.list.slice(0,1);
})
});
In the Last line of above code , ($scope.names.list.slice(0,1) , the list is a name of column in mysql table.
I have got a solution of my own question. that how to get first letter of a string by using a custom filter
var app = angular.module("myapp",[]);
app.filter('myFormat', function() {
return function(x) {
return x.slice(0,1);
};
});
app.controller("ctrl",function($scope,$http) {
$http.post(
"practicephp.php",
{'email':'kashfi#gmail.com','category':'mobileNumbers'}
).then(function(response) {
$scope.lists = response.data;
});
});
<ul ng-repeat= "x in lists">
<li>{{x.list_name | myFormat}}</li>
</ul>
Thank you for people who participate in my question to help me
I am new to AngularJs world and was trying to use angularjs-dropdown-multiselect inside component.
Component's HTML looks like:
<div>
<select id="statusSelection" class="form-control"
ng-options="status.name for status in $ctrl.statuses track by status.id"
ng-model="$ctrl.status" ng-change="$ctrl.filterChanged()"></select>
</div>
<div ng-dropdown-multiselect="" options="$ctrl.categories" selected-model="$ctrl.category"
events="$ctrl.events">
</div>
Event on status changed and category will call the same action.
MultiselectController.prototype.filterChanged = function() {
this.onFilterChange({
status: this.status,
category: this.category});
};
MultiselectController.prototype.events = {
onItemSelect: function(item) {
filterChanged();
},
onItemDeselect: function(item) {
filterChanged();
}
};
When I try to run the above code and change the status, the code works as expected but fails during Category change(error in console).
Error message: ReferenceError: filterChanged is not defined
Angular version: 1.5.8
angularjs-dropdown-multiselect: 1.11.8
Plunker: http://plnkr.co/edit/JL7N6M?p=preview
Thanks for helping me out here.
I have created an instance variable and initialize it to instance of Controller.
var _instance;
function MultiselectController($scope) {
this.statuses = testMultiselect.statuses;
this.categories = testMultiselect.categories;
this.$scope = $scope;
this.setDefault();
_instance = this;
}
Now, I am using this instance variable to access the functions on Controller.
MultiselectController.prototype.events = {
onItemSelect: function(item) {
_instance.filterChanged();
},
onItemDeselect: function(item) {
_instance.filterChanged();
}
};
I am not completely happy with this as there should be better way to do the same but until I find, I will keep this.
Updated Plunker: http://plnkr.co/edit/D7BKI9?p=preview
I am trying to use angular-resource.js file in my demo .I am retrieving
data from json file using $resource and display my data using ng-repeat .But Each item I added one button (info text button).I need to get it infomation using $resource property.I am sending ID on click function .but when I am using $resource property it gives error to me
$scope.getIn=function(id){
// alert(id)
$scope.oneUser = Entry.get({user: id});
console.log($scope.oneUser)
}
here is my code
http://plnkr.co/edit/lB11oQkQjbILK36u8V25?p=preview
If i understand correctly what you are trying to achieve this should solve it:
angular.module('app',['ngResource']).controller('a',function($scope, GetData){
// read data from factory and store it in $scope.posts
GetData.then(
function successCallback(data) {
$scope.posts = data.data;
},
function errorCallback(response) {
console.log(response); // handle any errors
});
// buttonclick to return the values from the selected id
$scope.getIn = function(id){
angular.forEach($scope.posts, function(value) {
if(value.id === id)
{
$scope.selectedValue = value;
}
})
};
console.log($scope.posts)
})
.factory('GetData', function($http){ // use http to read the json
return $http.get('data.json');
});
And the html:
<body ng-app='app' ng-controller='a'>
<div ng-repeat='p in posts'>
<span>{{p.name}}</span>
<button ng-click=getIn(p.id)>info</button>
</div>
{{selectedValue}}
</body>
Users can search for a movie title in my inputfield and it will show them a list of movies. They can then hover over a title and a Add Movie button pops up. They can click it so it gets added to their frontpage. But now I'm trying to figure out how they can remove that movie from the database. But I can't find a clear example on how to do this.
This is how I show the movies,
%div{"ng-repeat" => "movie in movies"}
{{ movie.id }}
{{ movie.title }}
%a{"ng-click" => "deleteMovie($index)"}delete
I think I have to create a delete action in my controller called deleteMovie which works with a service to remove the id from the database.
This is how I see the service,
.factory('removeMovie', ['$http', function($http) {
return {
deleteMovie: function() {
return $http.delete('/movies.json/$id');
}
};
}])
The deleteMovie would be called in the controller. But I have the feeling I'm approaching this the wrong way.
Please follow the below code.
HTML View
%div{"ng-repeat" => "movie in movies"}
{{ movie.id }}
{{ movie.title }}
%a{"ng-click" => "deleteMovie(movie)"}delete
Controller
.controller('MainController', ['$scope','removeMovie',
function($scope, removeMovie) {
$scope.deleteMovie = function(movie){
removeMovie.deleteMovie(movie.id).then(function(sucessResponse){
//success callback
},function(errorResponse){
//Error callback
})
}
}
]);
Factory
.factory('removeMovie', ['$http', function($http) {
return {
deleteMovie: function(movieId) {
var _movieId = parseInt(movieId);
return $http.delete('/movies.json/'+_movieId);
}
};
}]);
if you are using the static json, then you do not need to make any rest request. You can simple splice the movie from movies array.if you are deleting movie from database then you need to make a rest request like this $http.delete('/movies/'+_movieId);
if the service only calls one http call, you might ass well write that already i your controller:
view:
%div{"ng-repeat" => "movie in movies"}
{{ movie.id }}
{{ movie.title }}
%a{"ng-click" => "deleteMovie(movie.id)"}delete
and inthe controller
.controller('myCtrl', ['$scope', '$http', function($scope, $http) {
$scope.deleteMovie = function(id) {
$http.delete('/movies.json/' + id);
}
}])
Pass in the whole movie object so that you can use it for the post but also to simply index it in the array for removal locally as well.
Adjust factory for id
.factory('removeMovie', ['$http', function($http) {
return {
deleteMovie: function(id) {
return $http.delete('/movies/' +id);
}
};
}]);
HTML
"ng-click" => "deleteMovie(movie)"}delete
Now make request from controller and remove from local array on completeion
$scope.deleteMovie = function(movie) {
removeMovie.deleteMovie(movie.id).then(function(resp){
// validate your response here before next step
// get index of movie in array
var idx = $scope.movies.indexOf(movie);
//remove from array
$scope.movies.splice( idx, 1);
});
}
Note that it seems strange to have a factory just for removeMovie.
Normally you would have all your CRUD operations in the same factory
Folks,
I have following Button Click which calls AngularJS $scope.getCustomerById method
<div><button type="button" ng-click="getCustomerById(cust.CustomerNumber);">detail of
{{cust.CustomerNumber}} customer</button>
</div>
Now my Controller JS code for getCustomerById is as below
$scope.getCustomerById = function (id) {
CustomerService.getCustomer(id)
.then(function (data) {
$scope.customer = data.data; //which returns data correctly
$location.path('Customer/' + $scope.customer.CustomerNumber.trim());
}, function (error) {
alert(error);
});
};
and it goes to Designated View as well, but this View Does not render customer data. My CustomerView is very simple,
<div data-ng-controller="CustomerController">
{{ customer.CustomerNumber }}//this doesn't show anything, eventhough $scope.customer
//is set in controller as above
</div>
Any help will be really appreciated.