I am newbie to angularjs. I succeeded in making the fileuploader work and displaying the files uploaded. Now I want to remove the files which I do not want.
Here is how my upload and display works.
html file
<div class="container-fluid">
<error-display error-display-api="errorDisplayApi"></error-display>
<div ng-controller="complianceItemDocumentcontroller">
<div class="form-inline">
<span class="btn btn-default">
Add Photo
<input ng-model="file"
onchange="angular.element(this).scope().file_changed(this)"
type="file" accept="image/*">
</span>
<button ng-click="removeFile()">Delete Photo</button>
</div>
<div ng-repeat="images in document">
<label name ="desscription" ng-bind ="images.Description"></label><br>
</div>
</div>
</div>
javascript file
app.controller('complianceItemDocumentcontroller', ['$scope', '$http', function ($scope, $http)
{
var url = "http://localhost:/....";
$http.get(url)
.success(function (data, status, headers, config)
{
$scope.document = data;
})
.error(function (data, status, headers, config)
{
$scope.document = undefined;
});
$scope.removeFile = function()
{
alert("delete");
};
$scope.file_changed = function(element)
{
$scope.$apply(function (scope)
{
var fd = new FormData();
fd.append('file', element.files[0]);
var urlpost = "http/.....";
var req = { method: 'POST', url: urlpost, headers: { 'Content- Type': undefined }, data: fd}
$http(req)
.success(function (data, status, headers, config)
{
alert("uploaded");
})
.error(function (data, status, headers, config)
{
alert("fail");
});
});
}
}]);
I should be able to select the images in the list and based on the selection of the file I should be able to call the related API to remove the document using the document ID.
I am unable to figure out how to select a file and upon selected get the document ID. Then I will call the method through httppost and that will be deleting the file in the database. Also I should be able to display the images available as thumbnails. Currently it is just a plain list of names of files.
Thank you for your time and suggestions.
Related
I'm trying to call a method in Angular but it doesn't work and I don't know why
This is my HTML
<div class="panel-footer text-right">
<input type="button" ng-click="AceptarSolicitudPendiente()" class="btn btn-primary" value="Guardar" />
</div>
and this is my JS
s.AceptarSolicitudPenediente = function () {
var config = {
method: "POST",
url: "CatSolicitud.aspx/GuardarLOG",
data: {
Log: {
IdSolicitud: s.solicitudSeleccionada.Id_Sol,
FechaCompromiso: $("#FechaCompromiso").val(),
Comentario: s.Comentario,
Estatus: "Activo",
Motivo: null
}
}
};
h(config).success(function (data, status, head, conf) {
data = $.parseJSON(data.d);
if (data.success) {
s.closeAceptar();
s.message = data.message;
s.openModal();
s.loadSolicitud();
} else {
s.message = data.message;
s.openModal();
}
}).error(function (data, status, head, conf) {
console.log(data);
});
}
It should work because I have another method to do another action and it works, but not this. I'm tired of search any error or something but no, I can't find anything.
I just found my mistake, I was writting different name Function.
I was calling AceptarSolicitudPendiente() and It was AceptarSolicitudPenediente()
Thank you guys.
I have a feeling that this should be very simple thing to do but I can't figure it out at the moment.
I am learning AngularJS by building a simple podcast app. So far I've managed to convert an XML file from url to JSON object.
Now I would like to loop thru each object of the "story" and display data such as title and image url. (see img below)
starter.controller('fox', function($scope, $http){
$http.get('http://api.npr.org/query?id=57&apiKey=i've removed the key)
.success(function(data, status, headers, config){
var x2js = new X2JS();
var jsonOutput = x2js.xml_str2json(data);
console.log(jsonOutput);
$scope.title = jsonOutput.nprml.list.story[0]['title'];
})
.error(function(data, status, headers, config){
alert('There is a problem');
})
});
<div class="list" ng-repeat=" ? ">
{{title}}
</div>
The code below only renders the first object as I've set that manually - story[0]['title'] and I am unsure hot to loop thru the list.
In jQuery I would usually do for each loop and append the result in a div.
it should be something like this.
starter.controller('fox', function($scope, $http){
$http.get('http://api.npr.org/query?id=57&apiKey=i've removed the key)
.success(function(data, status, headers, config){
var x2js = new X2JS();
var jsonOutput = x2js.xml_str2json(data);
console.log(jsonOutput);
$scope.stories = jsonOutput.nprml.list.story;
})
.error(function(data, status, headers, config){
alert('There is a problem');
})
});
<div class="list" ng-repeat="story in stories">
{{story.title}}
{{story.link}}
</div>
I am quite new in the area of AngularJS and of course I am doing something in the wrong way. So, here is my problem: I have a small chat widget which takes the data through JSON from a PHP API. In my JSON I provide all the messages with wrappers and with some ng* tags. The problem I have is that the ng-click action is not fired on those elements. The html block are injected with ng-bind-html.
Here is my angular app:
var chat = angular.module("chat", ['ngDialog']);
chat.controller('GetChatMessagesController', function ($scope, $http, $timeout, $sce, ngDialog) {
$scope.messages = "";
$scope.getData = function() {
$http.get("/url/to/api")
.success(function(data, status, headers, config) {
$scope.messages = data.html;
}).error(function(data, status, headers, config) {
//alert("AJAX f ailed!");
});
};
$scope.getData();
$scope.getHtml = function(html){
return $sce.trustAsHtml(html);
};
// Function to replicate setInterval using $timeout service.
$scope.intervalFunction = function(){
$timeout(function() {
$scope.getData();
$scope.intervalFunction();
}, 5000)
};
// Kick off the interval
$scope.intervalFunction();
$scope.messageAdminTools = function(message_id)
{
console.log("called");
var template = $scope.adminToolsTemplate(message_id);
console.log(template);
ngDialog.open({
template: template,
plain: true
});
};
$scope.adminToolsTemplate = function(message_id)
{
$http.get("/url/to/api" + message_id)
.success(function(data, status, headers, config) {
return data.html;
}).error(function(data, status, headers, config) {
//alert("AJAX f ailed!");
});
};
});
And here is the html code that comes from the JSON:
<body ng-controller="GetChatMessagesController" class="ng-scope">
<div class="messages-container ng-binding" ng-bind-html="getHtml(messages)">
<div class="message message_1">
<span class="time">16:33</span>
<span class="chatbox_user"><a target="_blank" href="url">admin</a>: </span>
<span class="text">test x</span>
</div>
</div>
</body>
The ng-click="messageAdminTools('1') does not fire when I click the element. What am I doing wrong?
Thanks!
EDIT: Working code
Here is the code modified after the answer, code that solves the issue:
var chat = angular.module("chat", ['ngDialog']);
chat.controller('GetChatMessagesController', function ($scope, $http, $timeout, $sce, ngDialog) {
$scope.messages = "";
$scope.getData = function() {
$http.get("/url/to/api")
.success(function(data, status, headers, config) {
$scope.messages = data.html;
}).error(function(data, status, headers, config) {
//alert("AJAX f ailed!");
});
};
$scope.getData();
$scope.getHtml = function(html){
return $scope.messages;
};
// Function to replicate setInterval using $timeout service.
$scope.intervalFunction = function(){
$timeout(function() {
$scope.getData();
$scope.intervalFunction();
}, 5000)
};
// Kick off the interval
$scope.intervalFunction();
$scope.messageAdminTools = function(message_id)
{
console.log("called");
var template = $scope.adminToolsTemplate(message_id);
console.log(template);
ngDialog.open({
template: template,
plain: true
});
};
$scope.adminToolsTemplate = function(message_id)
{
$http.get("/url/to/api")
.success(function(data, status, headers, config) {
return data.html;
}).error(function(data, status, headers, config) {
//alert("AJAX f ailed!");
});
};
}).directive('compile', ['$compile', function ($compile) {
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
// watch the 'compile' expression for changes
return scope.$eval(attrs.compile);
},
function(value) {
// when the 'compile' expression changes
// assign it into the current DOM
element.html(value);
// compile the new DOM and link it to the current
// scope.
// NOTE: we only compile .childNodes so that
// we don't get into infinite loop compiling ourselves
$compile(element.contents())(scope);
}
);
};
}]);
HTML:
<body ng-controller="GetChatMessagesController" class="ng-scope">
<div class="messages-container" compile="getHtml(messages)">
<div class="message message_1 ng-scope">
<span class="time">16:33</span>
<span class="chatbox_user"><a target="_blank" href="url">admin</a>: </span>
<span class="text">test x</span>
</div>
</div>
</body>
Try this: angular ng-bind-html and directive within it
Take a look inside the directive that vkammerer provided.
Especially take note of the $compile step.
i'm building application which uses CORS requests. Each request i use get host address from a constant
angular.module('siteApp').constant('baseUrl', {
'server':'htttp://localhost/',
})
And in each service i use to send request like this:
angular.module('siteApp').factory('DocsSvc', function ($http, baseUrl) {
var baseurl = baseUrl.server ;
$http.get(baseurl + 'document')
Is it possible to make 'htttp://localhost/' value - to came from config.json file into baseUrl constant or baseUrl factory?
I mean : how can i load something from ajax request an make it accessible to app modules
i have tried:
.run(['$rootScope', , function ($rootScope) {
$.ajax('config.json', {async: false})
.success(function (data) {
$rootScope.HOST = data.HOST;
});
And tried to access it from baseUrl:
angular.module('siteApp').factory('baseUrl',function($rootScope) {
return {
server: $rootScope.HOST
But no luck - the baseUrl.server comes undefined into functions
You can use run method of angular.
var app = angular.module('plunker', []);
app.run(function($http, $rootScope){
$http.get('config.json')
.success(function(data, status, headers, config) {
$rootScope.config = data;
$rootScope.$broadcast('config-loaded');
})
.error(function(data, status, headers, config) {
// log error
alert('error');
});
})
app.controller('MainCtrl', function($scope, $rootScope) {
$scope.$on('config-loaded', function(){
$scope.name = $rootScope.config.name;
});
});
see this plunker
If you want to do it even before the angular app starts, you can, instead of using the ng-app directive, use the bootstrap function.
From:
https://docs.angularjs.org/api/ng/function/angular.bootstrap
<!doctype html>
<html>
<body>
<div ng-controller="WelcomeController">
{{greeting}}
</div>
<script src="angular.js"></script>
<script>
var app = angular.module('demo', [])
.controller('WelcomeController', function($scope) {
$scope.greeting = 'Welcome!';
});
// Do your loading of JSON here
angular.bootstrap(document, ['demo']);
</script>
</body>
</html>
You need to tell angular about data change, so modify your code something like this:
.run(['$rootScope', function ($rootScope) {
$.ajax('config.json', {async: false})
.success(function (data) {
$rootScope.HOST = data.HOST;
$rootScope.$apply(); // New line
});
}])
That $apply() is needed since its a non-angular asynchronous call.
use the blow code snippet to load the json values
.run(function ($http, $rootScope) {
$http.get('launchSettings.json')
.success(function (data, status, headers, config) {
$rootScope.config = data;
$rootScope.$broadcast('config-loaded');
})
.error(function (data, status, headers, config) {
// log error
alert('error');
});
});
My app has more than 10 screens and i want for programming order to keep each screen to different html file. In the index file I have the log in screen and in the angular controller I make the connection to the MySQL DB and it returns the response from DB. Now how can I call the main profile page (profile.html)?
my JS code:
var myApp = angular.module('Appname', ['onsen.directives']);
myApp.controller("LogInController", function ($scope, $http) {
$scope.errors = [];
$scope.msgs = [];
$scope.login = function () {
$scope.errors.splice(0, $scope.errors.length);
$scope.msgs.splice(0, $scope.msgs.length);
$http.post('http://192.168.1.2/login.php', {'u':"Username", 'p':"Password"}).
success(function (data, status, headers, config) {
$scope.posts = data;
console.log(data);
alert(data[0].msg);
//here I want to put main page profile.html
}).
error(function (data, status, headers, config) {
alert(data);
});
}});
If I don't use the right approach, can you suggest me another example??
Hope this clue would help.
Can you try out something like this.
$scope.ons.navigator.pushPage('profile.html');