Develop Reference

Create th:href based on values from javascript

I'm using this kind of button to redirect in my spring controller, and it works well:
<a class="btn btn-info" role="button" th:href="#{/grid/year/2017/month/12}">
<span th:text="#{grid}"></span>
</a>
I need to change the values of year and month based on values selected in a javascript function like this:
$('#year').on('change', function() {
var year = $(this).find('option:selected').val();
var selectedYear= $(this).val();
});
For example, if the year selected is 2016 I want to create a th:href="#{/grid/year/2016/month/12} so I can redirect to my controller with this values.
Is this possible, or there is another option? Thanks.
UPDATE 1:
If I add an id
<a class="btn btn-info" id="add" role="button" th:href="#{/grid/year/2017/month/12}">
<span th:text="#{grid}"></span>
</a>
and
alert($('#add').attr('role'));
I get value: button, but not with th:href, maybe ":" is the problem.....

You can change year in th:href attribute using jquery as follows:
$('#year').on('change', function() {
var year = $(this).find('option:selected').val();
var selectedYear= $(this).val();
var str = $('a').attr('th:href');
var arr = str.split('/');
arr[3] = selectedYear;
newVal = arr.join('/');
$('a').attr('th:href',newVal);
});
With the above code, href will be changed to "#{/grid/year/2016/month/12}"

Angular Dynamic Field in form not showing in view

This is baffling. It is such a simple thing, but I'm not able to get it to work. I am adding an input field to the form on a button click (originally). At this point I'm just trying to see any value in the view (hence the simple p tag)
HTML VIEW
<span>Add secondary field</span>
<md-button class="md-fab md-mini" ng-click="vm.addVals()">
<i class="material-icons">add</i>
</md-button>
<div ng-if="moreVal">
<div data-ng-repeat="vl in valHolder.valArr track by $index">
<p>My Value: {{vl.myVal}}</p>
</div>
Controller
function EditFormController($scope, $sanitize, ngToast) {
var vm = this;
vm.addVals = addVals;
$scope.valHolder= {valArr: []};
function addVals(){
var ln = $scope.valHolder.valArr.length;
$scope.valHolder.valArr.push({myVal: 'Test'+ln});
$scope.moreVal = true;
}
}());
I have checked that valArr is being populated with new myVal values on button click. But I cannot see anything in the View. the ng-repeat div is empty. Why is this happening? I have been searching for a solution all day now, but this is so absurd no one seems to have this issue. Don't know what I'm doing wrong. I would really appreciate an answer.

Write below code in your controller:
var self = this;
self.valHolder= {valArr: []};
function addVal(){
var ln = self.valHolder.valArr.length;
self.valHolder.valArr.push({myVal: 'Test'+ln});
self.moreVal = true;
}
Write in your HTML like below:
<div ng-if="moreVal">
<div data-ng-repeat="vl in vm.valHolder.valArr track by $index">
<p>My Value: {{vl.myVal}}</p>
</div>

Your addVal function is not getting called. Please change your HTML view to this-
<span>Add secondary field</span>
<md-button class="md-fab md-mini" ng-click="addVal()">
<i class="material-icons">add</i>
</md-button>
<div ng-if="moreVal">
<div data-ng-repeat="vl in valHolder.valArr track by $index">
<p>My Value: {{vl.myVal}}</p>
</div>
and Controller code to this-
$scope.valHolder = { valArr: [] };
$scope.addVal = function () {
var ln = $scope.valHolder.valArr.length;
$scope.valHolder.valArr.push({ myVal: 'Test' + ln });
$scope.moreVal = true;
}
In case you are using ControllerAs syntax and you have specified controllerAs:"vm", then your code will be below
<span>Add secondary field</span>
<md-button class="md-fab md-mini" ng-click="vm.addVal()">
<i class="material-icons">add</i>
</md-button>
<div ng-if="vm.moreVal">
<div data-ng-repeat="vl in vm.valHolder.valArr track by $index">
<p>My Value: {{vl.myVal}}</p>
</div>
and Controller code to this-
var self = this;
self.valHolder = { valArr: [] };
self.addVal = function () {
var ln = self.valHolder.valArr.length;
self.valHolder.valArr.push({ myVal: 'Test' + ln });
self.moreVal = true;
}

You are using ng-click="vm.addVals()" and $scope in controller.
I think you should use var vm in controller as well. Add these lines:
var vm = this;
vm = {};
and
vm.addVals = addVals;

upload multiple files using the same uploader angular

So i'm trying to get this uploader working, This is what i have at the moment
This is my html
<div class="row" ng-repeat="row in fileUploadRows">
<div ng-if="advanced_user" class="btn btn-info btn-sm" style="display:inline-block" ngf-select="uploadinv($file, $index)">Upload Attachment</div>
<p style="display:inline-block;" ng-if="row.fileName">Uploaded file: {{row.fileName}}
<button type="button" ng-click="deleteInvAttachment(event.filenameinv)" class="btn btn-danger btn-sm">
<i class="fa fa-trash-o"></i>
</button>
<button type="button" ng-click="addInvAttachment($index)" class="btn btn-info btn-sm">
<i class="fa fa-plus"></i>
</button>
<button type="button" ng-click="removeInvAttachment(row)" class="btn btn-danger btn-sm">
remove last attachment
</button>
</div>
And this is in my controller
$scope.fileUploadRows = [];
var fileDetails = {
fileName: $scope.event.filenameinv
}
$scope.fileUploadRows.push(fileDetails);
$scope.counter = 1;
$scope.addInvAttachment = function(index) {
var fileDetails = {
fileName: ''
}
$scope.fileUploadRows.push(fileDetails);
$scope.counter++;
}
$scope.removeInvAttachment = function(row) {
$scope.fileUploadRows.splice(row, 1);
}
Now what I've got at the moment works to an extent, I can click the plus button and it'll load a blank upload button on the html side, As well as a blank fileName in the {{fileUploadRows}} Now the issue i have is when i try and upload a new file. It replaces the old file (as well as the old string etc)
Heres my uploader
$scope.uploadinv = function (file, index) {
if (file && $scope.advanced_user) {
Upload.upload({
url: '',
data: {file: file}
}).then(function (resp) {
sweetAlert({title: "Attachment Saved", type: "success"});
}, function (resp) {
sweetAlert({title: "Attachment Not Saved", type: "error"});
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
$scope.event.filenameinv = evt.config.data.file.name
});
}
};
So how would i go about saving each file into the array?
Thanks

I strongly recommend you to use ng-file-upload : https://github.com/danialfarid/ng-file-upload
Very complete, supports drag and drop, image resizing, and many more.
It seems you might be using it (i noticed Upload service and the ngf-select directive)
If you are, check out ngf-change, and try binding your file input with ng-model, for $scope accessibility.

Declare function inside scope and call it later

Calling the callService function fails. Instead none of my console messages are showing in the console except for 'making a controller....'. I'm using the directive ng-click="callService()" to make the call from an HTML button. I'm new to angular, can someone point me in the right direction? Code is below.
(function() {
console.log('making a controller....');
'use strict';
angular.module('myModule').controller('myController', myController);
myController.$inject = ['$scope','$http'];
function myController($scope, $http) {
console.log("controller initialized...");
$scope.callService = function(){
console.log("callService called...");
var urlSearchService = 'http://domain/proj/rs/stuff/moreStuff';
var skuVal = $scope.skuField;
var mVenVal = $scope.mVendorField;
//need to somehow specifiy that xml is a #FormParam
var xmlItemSearchRequest = "<ItemSearchRequest>"
+"<skuid>" + skuVal + "</skuid>"
+"<mvendor>" + mVenVal + "</mvendor>"
+"</ItemSearchRequest>";
console.log('calling: ' + urlSearchService + 'sending xml: ' + xmlItemSearchRequest);
$http.post(urlSearchService, xmlItemSearchRequest).
success(function(data){
$scope.searchResults = data;
console.log('call to ' + urlSearchService + ", was a success.");
}).error(function(data, status) {
console.error('Calling error', status, data);
});
};
};
})();

You are declaring the callService function inside the scope of the controller function, so it won't be accessible from the $scope. You need to add it to the $scope in order to be able to use it in your templates.
Instead of:
var callService = function(){
Do:
$scope.callService = function(){
As per your latest comment, you are not binding correctly the controller.
This:
<div data-ng-controller="inventorySearchController"><input type="button" class="btn btn-primary btn-lg" ng-click="callService()" value="Search" /></div> –
Should be:
<div data-ng-controller="myController"><input type="button" class="btn btn-primary btn-lg" ng-click="callService()" value="Search" /></div> –

How to get file selection complete event in angularJS

Currently this is How brand list page looks like.
when user clicks on Pick Image button, i set updateMode=1, making delete and upload button visible.
Problem is sometime user does not select a image after clicking upload button, instead press cancel in file selection window. that time also delete and upload button becomes visible. I want to avoid that.
Also when user clicks on delete i want input text to become empty.
This is my HTML code.
<tr ng-repeat="b in Brands | filter:SearchText |orderBy:'name'">
<td>
<span data-ng-hide="editMode">{{b.name}}</span>
<input type="text" data-ng-show="editMode" data-ng-model="b.name" data-ng-required />
<input type="text" data-ng-show="editMode" data-ng-model="b.image" data-ng-required />
<br><br>
<input type="text" ng-model="b.files[0].name" readonly="readonly">
<button ngf-select ng-model="b.files" class="btn btn-success btn-sm" ng-click="uploadMode=1">
<span class="glyphicon glyphicon-picture"></span> Pick Image
</button>
<button data-ng-hide="!uploadMode" class="btn btn-danger btn-sm" ng-click="uploadMode=0">
<span class="glyphicon glyphicon-trash"></span> Delete
</button>
<button data-ng-hide="!uploadMode" class="btn btn-info btn-sm" ng-click="upload(b.files, b.image)">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
</td>
<td><img src="http://localhost/{{ b.image }}" alt="" border=3 height=75 width=75><br><br>
</td>
and this is file upload code.
$scope.upload = function (files, path) {
//alert ('upload');
//alert (path);
//alert (files);
if (files && files.length) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
Upload.upload({
url: '/cgi-bin/upload.pl',
fields: {
'FilePath': path
},
file: file
}).progress(function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
$scope.log = 'progress: ' + progressPercentage + '% ' +
evt.config.file.name + '\n' + $scope.log;
}).success(function (data, status, headers, config) {
$timeout(function() {
$scope.log = 'file: ' + config.file.name + ', Response: ' + JSON.stringify(data) + '\n' + $scope.log;
});
})
.error(function (data, status, headers, config) {
alert ('Error');
});
}
}
};
what changes i should made to get above said functionality.
please help.

You'll need to use ngf-change available in ng-file-upload plugin
Instead of the ng-click , change it to the ngf-change in the HTML markup
<button ngf-select ng-model="b.files" ngf-change="fileSelected($files, $event, b)">
<span class="glyphicon glyphicon-picture"></span> Pick Image
</button>
Pass along the ng-repeat object as the 3rd parameter to the fileSelected function , and in the controller defined it as
$scope.fileSelected = function(files, events, b) {
if (files.length) {
b.uploadMode = true;
} else {
b.uploadMode = false;
}
};
Here we check whether files object is empty or not (Note: ngf-change gets called when the file selection dialog opens and on successful file selection) and set the uploadMode parameter as true or false.
For the delete file functionality , create a function which gets called on the click of Delete button and pass along the ng-repeat object
<button ng-if="b.uploadMode" ng-click="removefile(b)">
<span class="glyphicon glyphicon-trash"></span> Delete
</button>
In the controller , defined the removefile function , where you delete the files object
$scope.removefile = function(b) {
delete b.files;
b.uploadMode = false;
};
See working demo at http://plnkr.co/edit/zmZwiqJOLVILaCmc4uBQ?p=preview