FlowJS example to loop through files in Angular controller - javascript

Does anyone have an example on how to access the $flow object in an angularJS controller? I need to iterate through the files after the end user clicks a submit button before they're uploaded.
I've tried passing the $flow object from the front end...
<button class="btn btn-success btn-block" type="button" ng-click="ok($flow)">Save Submission</button>
And attempting to access it from the back end directly...
angular.forEach($scope.$flow.files, function (file, index) {
// do something
}
The $flow object is always undefined.

We have had trouble accessing $flow in $scope as well (though in theory that should work), so I recommend setting the following on the DIV:
<div flow-name="uploader.flow" ...> </div>
Then you can access in the Angular controller via something like the following:
$scope.uploader.flow.files[i].

Related

Passing values from view to .js file based on button click

I have a view that gets data from Model and displays the information. I am getting a list of school with school name and school Id from Model and then using foreach loop, I am creating a dynamic table based the number of schools the Model returns.
Below is the code I have for my view.
#if (Model.SelectedSchool != null)
{
foreach (var sch in Model.SelectedSchool )
{
<table class="table-bordered">
<tr>
<td class="col-sm-9">
#sch.SchoolName
</td>
<td class="col-sm-3">
<button class="btn btn-default" id="recentlySelected" name="btnRecentlySelected" type="button">
Select
</button>
</td>
</tr>
</table>
}
}
Here SchoolName is the property in the list I am getting from Model.
SchoolId is also in the list.
Below is the view I get
Now, I want that when a user clicks Select button, beside each school name, that specific SchoolId, is passed to the .js file where I am handing the javascript functions and based on the schoolId, the javascript function, generates the address of the school.
My question is how can I link the SchoolId's that I am getting in the SelectedSchool list to the respective Select buttons.
Thanks in advance!
First of all, you are setting the same id to all the buttons generated from the loop. This is invalid HTML ! Id values should be unique. So delete the Id property (unless you absolutely need it for something. in that case you need to make it unique)!
You can keep the school id in html 5 data attribute and read it later in javascript as needed.
Assuming you have a property called SchoolId,
<button class="btn btn-default" data-schoolid="#sch.SchoolId"
name="btnRecentlySelected" type="button">
Select
</button>
You can have the same attribute value for name property. You can use this as your jQuery selector when registering the click event on these buttons.
Now some unobutrusive javascript to bind a click event on this button
$(function(){
$("[name='btnRecentlySelected']").click(function(e){
e.preventDefault();
var schoolId= $(this).data("schoolid");
alert(schoolId);
// to do : Do something with the schoolId
});
});

set variable in angular without interrupting form post

I need to use an asp.mvc form post. I use some angularjs on the client side. I know this question is not doing everything the "angular way".
What I need to do is set a variable $scope.IsUploadingData when the post happens so I can disable the buttons and show something to indicate progress. I have tried using ng-click, but it seems to stop the post from happening. Is there anyway to set the variable without interrupting the form post?
#using (Html.BeginFormAntiForgeryPost(Url.Action("Accept", "Members", new { area = "Testing" })))
{
other form stuff here
<span class="input-group-btn">
<button ng-disabled="IsUploadingData == true" name="accept" type="submit">Submit</button>
<button class="btn btn-default" ng-disabled="IsUploadingData == true" name="reject" type="submit">Reject</button>
<img ng-show="IsUploadingData" src="/SiteMedia/spinner[1].gif" />
</span>
}
It looks like you could use ng-submit to control the submission process and set $scope.IsUploadingData in the function you call from ng-submit. This is a decent write-up on ng-submit: http://learnwebtutorials.com/angularjs-tutorial-submitting-form-ng-submit

How to pass URL with data from javascript instead of ui-sref in HTML?

I am using ui-sref which passes an id to given url page.But I want the same id and url to be passed from controller JS file rather than HTML.
HTML:
<button ui-sref="Followup({patient:patientid.id})">
OK </button>
Is it possible to pass the above id and url from Controller get the same result?
Do this
<button ng-click="go()"> OK </button>
In Controller
$scope.go = function (patient){
$state.go('Followup', {patientid:patient.id} );
}
I don't know patientid.id is correct or not in your question, so I supposed that we have a patient object and we want to navigate to next page with parameter as patient id.
You can use ng-click like following:
<button ng-click="followup(patient)">
OK </button>
and in your controller:
$scope.followup = function (patient){
$state.go('Followup', {patient:patient.id} );
}

How to clear a form in an ng-include

I have an html template with a reusable modal that gets ng-included like this:
myPartial.html
... SOME HTML ...
<ng-include src="'form.html'"></ng-include>
modal.html
...
<form>
<input ng-model="comment.value" />
<button type="submit" ng-click="save(comment.value)" />
</form>
...
What is the best way to clear the form -- particularly from the controller if possible. I'd like to clear the form from my save() method after a successful http call, but since ng-include creates it's own scope, i'm not sure how to do this.
Here's a plunker to show my problem: http://plnkr.co/edit/zkxZOZr3f7sHJZfCiuoT?p=preview
If you take the contents of form.html and put them directly into index.html it works just fine.
You almost got it. Just initialize the comment instance in your controller and update the correct value in save. I believe the behaviour your experiencing is called "prototypal inheritance" and you can read about it at Understanding scopes. This is not exclusive to AngularJS btw, but can be found in regular JavaScript as well.
angular.module('app', []).controller('appcontroller', function($scope) {
// create comment
$scope.comment = { value: 'test' };
$scope.save = function(value) {
console.log('in here ');
// and update comment.value, not comment.
$scope.comment.value = null;
};
});
I updated your plunker.

How to perform a check on ng-disabled in angularjs?

I am using a fuelUX Wizard and Angularjs. I would like the next button to be enabled or disabled basing on this controller method:
$scope.canMoveForward = function(){
switch($("#moduleWizard").wizard("selectedItem").step){
case 1:
//check if the module on the first step is valid*/
return $scope.validSelection && $scope.linkedPredicateForm.$valid;
case 2:
//check if the table is empty
return !linkingDataSource.isEmpty();
case 3:
var enab= ($scope.saveModeForm.$valid && $scope.newSourceForm.$valid) ||
($scope.saveModeForm.$valid && $scope.appendSourceForm.$valid)
}
};
So indeed this is how I decleared the buttons:
<div class="actions">
<button class="btn btn-mini btn-prev" ng-click="refresh()"> <i class="icon-arrow-left"></i>Prev</button>
<button class="btn btn-mini btn-next" data-last="Finish" id="wizard-next" ng-disabled="!canMoveForward()"
ng-click="handleStepResult()">
Next<i class="icon-arrow-right"></i></button>
</div>
And it works fine, except when I get back from the second page to the first page: if the next button is disabled in the second page it will be this way even on the first page, unless I don't edit the form there. Is there anyway to refresh the ng-disabled binding?
I guess AngularJS cannot check if the output of canMoveForward() has changed or not. I found that for this kind of things it's easier to rely on scope variables. You could do something like this:
ng-disabled="!canMoveForward"
Then in your controller just set the property to true/false as needed:
$scope.canMoveForward = false;
I have had the same problem and I've discovered that the problem is with the ! operator.
This fails:
ng-disabled="!canMoveForward()"
But this will work:
ng-disabled="canNotMoveForward()"

Categories