Emit value on a search button depending on checkbox state, AngualrJS - javascript

My app has a Search Button, that hits an internal API with a GET Request. Then we fetch Data that are protected in some cases. I have a checkbox which is set to true by default to simulate the Back-End behavior.
If that box is unchecked then we add a parameter to our query GET Request protection: false. This tells the Back-End to give us access to unprotected Data.
My question is this. How to keep watch of the checkbox state in Angular Controller, and this change gets emitted to the search button?
I understand that I need to use $scope.watch for that, but AngularJS isn't my strong suit, so please help.
The protection parameter is passed as an Action from Redux, down to an RxJS Epic, to the Reducer and then injected to endpoint.js and service.js files that handle thoe requests.
That is done and working. My big problem is how to handle the angular part. Below you will find the code for the HTML and Controller files.
INDEX.HTML
<button class="btn btn-default btn-sm" ng-click="getData(something, protection)"
ng-disabled="Ctrl.loading">
Run Search
</button>
<span>Protection
<input type="checkbox" ng-model="Ctrl.Protection">
</span>
Controller.js
$scope.getData = (something, protection) => {
ctrl.getSomecData(protection, protection);
ctrl.saveRecentSearch(something);
};
So, one final go. I want to be able to check and uncheck the box, and that change should be emitted to the search button, and then inject that parameter in the GET Request.
Please help me do that in Angularjs. I haven't worked with it before this job, and it is really frustrating. Thanks for your time.

You just need to use ngChange directive of angular js on checkbox element.
method binded with ng-change attribute will called whenever checkbox is checked or unchecked.
further $watch is not recommended since it hits performance of the page.
Html:
<input type="checkbox" ng-model="Ctrl.Protection" ng-change="change()">
In your controller :
$scope.change = function() {
if(this.Protection){
//whatever you wish to do here
$scope.getData($scope.something, this.protection);
}
};

Related

Angular JS ng file upload

i'm using Angular's JS well known ng file upload directive (https://github.com/danialfarid/ng-file-upload) in a project i'm working on, but i'm having an issues regarding validations. I added the ngf-pattern directive, in order to prevent users from uploading certain file formats. This works well, and each invalid file is available in the $invalidFiles array. Is there anyway to clear this array?
I am using $invalidFiles array in order to detect when invalid file was used, and alert the user. The file is not displayed in the UI, and not added to my model, but still I cannot submit the form because the form is invalid. only after I add a valid file I can submit the form. Is there a way to detect invalid files but still be able to submit the form ?
Hope I was clear.. Thanks!
Is this what you need : JsFiddle
$scope.submit = function() {
alert('form is ready');
}
Probably the thing you really need is ngf-change rather then ngf-select. Based on the documentation, the handler function you assign to ngf-change directive would be called whenever you select, drop, or cleared.
If the only thing you want to achieve is to allow form submission regardless it's valid or invalid, another approach would be leveraged on ng-model-options. There is an option called allowInvalid, by default it's false, set it to true would do the trick.
So in your example:
<button name="bla" multiple accept="image/*"
ngf-keep="true"
ng-model="myFiles"
ngf-pattern="'image/*'"
ngf-max-size="1MB"
ngf-change="handleFiles($files, $invalidFiles)"
ngf-model-options="{allowInvalid: true}">
Select Files
</button>
Notice the last two directives we have changed here.
For full reference, you may check the official document at the section of Full reference - File select and drop

edit user form angular

so here's my github for my recent project: https://github.com/ryanwaite28/form-site
its a form site where you can create and edit users. I got the create functionality working, however the edit isn't
when you click edit, i want to pass the user info into the edit function's parameters but i can't seem to get it right. i want to set the user's info to that of which is in the input box. is there something i'm doing wrong? Also, im using angular JS and jQuery.
You are not passing the user to the function in the html:
<td><button type="button" id="edit-btn" ng-click="editUser(user)">Edit</button></td>
Also, you need to reference the form of the "in edit" user somehow like:
$scope.editUser = function(user) {
$scope.userBeingEdited = user;
}
And reference the html of the edit form to this userBeingEdited part of the scope.
The saveChanges method should not be inside the edit function. Should be a separate function in which you can commit changes

Is ok to deactivate a user account using GET http verb?

Im stuck with a simple but tricky task that im developing on ASP.NET MVC 5 web app.
I have a UserManager view wich i need to add a button to deactivate the account of the current logged user. So i have two options:
1) Create a input tag an hold the click event making a post using ajax:
<input type="button" id="deleteUser" value="Delete Account"/>
<script>
$('#deleteUser').click(function() {
$.post("#Url.Action("DeleteUser")",function() {
window.href.location = "#Url.Action("Home","Site")";
} );
});
</script>
On controller:
[HttpPost]
[Authorize]
public ActionResult DeleteUser()
{
//return json
}
2) Create a href and make a GET pointing to the DeleteUser action.
IMO these two options are correct, but the right thing to do is delete a user using the DELETE Http Verb, right? Since HTML5 doesnt support it, how to deal with it? In the options above, i prefer to use a href, because i can make a feedback easily based on the logic that i have, and i dont need to make a script for it.

AngularJS - Setting value of radio button built using ng-repeat

Here's the HTML :
<div>
<ul>
<li ng-repeat="answer in answers">
<input type="radio" ng-model="$parent.selectedAnswer" name="answerText" value="{{answer.answerID}}"/>
<label>{{answer.answerText}}
</label>
</li>
</ul>
</div>
The need is to store the selected answer into LocalStorage and whenever the question shows up again, mark the radio button corresponding to that answer.
I'm able to store it in LocalStorage, retrieve it, but when I update the model, it doesn't select the radio button on the UI.
In my controller, I'm simply calling -
$scope.selectedAnswer = value.answerID;
where value points to the answer stored in the LocalStorage.
Please help.
EDIT:
A little more detail :
I'm managing the entire quiz page using a single route and controller. When one question is done, I fetch the next question and its corresponding answers. While populating the answers array in the controller ($scope.answers), I'm checking to match their IDs with the answer stored in the LocalStorage. Between each question, the answers array is emptied and populated again.
So you should be using ng-value to do this since it is an angular expression and not a text value. Using just value as you did worked in Plnkr but I know that sometimes it does not.
Also in general I have found that using the ng-controller="<ControllerName> as <ThisRef>" works a lot better in most cases. There are times when you still need the $scope variable (Like for form validation) but normally I have fewer scoping issues when using the controllers "this" variable over the $scope.
I made an example using the method I described:
http://plnkr.co/edit/XV3we6SDmmLmUGSwdVVT?p=preview
If your question has to do with HTML 5 Local Storage let me know, I wasn't sure
EDIT:
Alternatively you can try using $scope.$apply(); to accomplish this. If the scope is not in sync with the view then apply should fix that.
Here is another plnkr showing how I would generally do something like that. Note that the $apply is 100% not needed in that example but likely is needed in yours.
Here is my example:
$scope.updateModel = function(value) {
$timeout(function() {
$scope.$apply(function() {
$scope.selectedAnswer = value;
});
});
};
Notice I am using $timeout to make sure it doesn't happen while there is a digest in progress.
http://plnkr.co/edit/O7CBfTiWPrsbthFKlAOZ?p=preview
I hope this edit helps =)
Since you only have one controller, you don't need to specify $parent.
<div>
<ul>
<li ng-repeat="answer in answers">
<input type="radio" ng-model="selectedAnswer" name="answerText" value="{{answer.answerID}}"/>
<label>{{answer.answerText}}
</label>
</li>
</ul>
</div>

Weird Angular ng-model issue

I have a weird question regarding my Angular app.
I wanted to get the input texts when user enter texts in the input box.
my html
<input type="text" class="form-control" ng-model="texts" ng-change="type()"/>
my js
$scope.type = function() {
console.log($scope.texts)
console.log($scope) //doesn't see texts property either
}
However, every time I type something, the first console log shows 'undefined'. It's like controller can't find the texts property. Can anyone help me this weird issue? Thanks a lot!
This can be accomplished by using angular's two-way data binding system:
Data-binding in Angular apps is the automatic synchronization of data
between the model and view components. The way that Angular implements
data-binding lets you treat the model as the single-source-of-truth in
your application. The view is a projection of the model at all times.
When the model changes, the view reflects the change, and vice versa.
This allows us to synchronize the properties of our controller's scope by binding to them in our html.
So, we might define our controller like this:
myApp.controller('SomeController', function ($scope) {
$scope.text = "";
});
Now, we can use this in our html like this:
<div ng-controller="SomeController">
<input type="text" class="form-control" ng-model="text" />
</div>
The important thing to notice here is the ng-model directive. Here we bind the text property we defined in our controller to the <input> field. Now, with two-way binding, if we type into the input field it will automatically update the text property. This way we can access the value of the input field within our controller without having to do any extra work.
Here is a plnkr with a working example: http://plnkr.co/edit/xEkoDbPxwrWgGfuEiS3a?p=preview
Hope this helps :-)
$scope has to be passed in to the controller. Check your controller arguments.

Categories