<div ng-repeat="x in spaceutilization">
<input type="checkbox" name="{{x.filenumber}}" id="{{x.id}}" class = "pdffiles" value="101SP{{x.initials}}.dwg" /><label for="{{x.id}}"><button type = "button" class = "btn btn-primary btn-sm hidden-sm hidden-xs"> PDF</button></label><br />
</div>
I need to be able to add something to this snippet that disables the input checkbox based on another AngularJS input such as {{x.status}}. I tried simply doing:
<input type="checkbox" name="{{x.filenumber}}" id="{{x.id}}" class = "pdffiles" value="101SP{{x.initials}}.dwg" {{x.status}} />
Where status:'disabled' but that gave an output of
{{x.status}}=""
within the input element...which I don't understand why at all. But it seemed like the simplest route.
You need to use ng-disabled="expression" directive, on basic of expression evaluation value it add disabled attribute to that element.Also for better attribute values evaluation you could use ng-attr directive
Markup
<input type="checkbox" ng-attr-name="{{x.filenumber}}" ng-attr-id="{{x.id}}" class ="pdffiles"
value="101SP{{x.initials}}.dwg" ng-disabled="x.status == 'disabled'"/>
If x.status does return a bool value then you could directly used ng-disabled="{{x.status}}"
Related
I have an ASP.Net Core MVC Web Application project.
I want to send the checkbox's checked state as the value to the model's related parameter on form submit.
I have seen so many examples that using jquery to get/set the value of the checkbox via onchange methods.
What I wonder is that is it possible to assign the current checkbox's checked state to the value in a similar way to the code below.(it doesn't work)
<input type="checkbox" id="IsActive" name="DTO.IsActive" checked="#Model.IsActive" value="(this.checked)"
One of the simplest working examples I found is the following but it returns false if the checkbox is checked by default and its state is not changed.
<input type="checkbox" id="IsActive" name="DTO.IsActive" checked="#Model.IsActive" onchange="if(this.checked) this.value='true'; else this.value='false';" >
I know that there are many ways to achieve what I want but I want the cleanest solution.
Thanks in advance!
Edit: The structure of my code is as follows:
View
#model MyModel
<form id="UpdateForm" class="was-validated" method="post" enctype="multipart/form-data" asp-controller="ControllerName" asp-action="Update">
<div class="modal-body">
<div class="form-group">
<input type="text" class="form-control" id="Name" name="DTO.Name" value="#Model.Name" required>
<input type="checkbox" id="IsActive" name="DTO.IsActive" checked="#Model.IsActive">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" data-save="modal">Update</button>
</div>
</form>
Controller
public async Task<IActionResult> Update(Guid id, UpdateDto DTO)
{
...
}
Solution
https://www.learnrazorpages.com/razor-pages/forms/checkboxes
In View
<input type="checkbox" " id="IsActive" name="DTO.IsActive" checked="#Model.IsActive" value="true">
In DTO Object Set Default
public bool IsActive { get; set; } = false;
Yes you can do it by using an inline razor statement #()
It would look something like this:
<input type="checkbox" id="IsActive" name="DTO.IsActive" #(Model.IsActive ? "checked" : "") />
also you could use the Checkbox helper
#Html.CheckBoxFor(model => model.IsActive )
Here is the code on selection of any one of the radio button i need to get the value
<label ng-repeat="SurveyType in SurveyTypes">
<input type="radio" name="SurveyTypeName" ng-model="surveyData.SurveyTypeName" ng-value="{{surveyData.SurveyTypeName}}" />
{{SurveyType.Name}}
</label>
You should assign value from your repeat-loop not from model value and no need to use {{}} for ng-value
so use ng-value="SurveyType.Name" instead of ng-value="{{surveyData.SurveyTypeName}}" so selected radio button value set to surveyData.SurveyTypeName.
If you want to select anyone by default you can assign value to surveyData.SurveyTypeName like $scope.surveyData={SurveyTypeName: 'second'} then that radio button shown as selected that has value second.
HTML:
<label ng-repeat="SurveyType in SurveyTypes">
<input type="radio" name="SurveyTypeName" ng-model="surveyData.SurveyTypeName" ng-value="SurveyType.Name" />
{{SurveyType.Name}}
</label>
PLUNKER DEMO
Your HTML should be like this.
<input type="radio" name="SurveyTypeName" ng-model="surveyData.SurveyTypeName" ng-value="{{surveyData.SurveyTypeName}}" ng-change="getval($index)"/>
Js
$scope.getval = function (index){
var servetypename =SurveyTypes[index];
var data =servetypename.SurveyTypeName
}
Don't know from surveyData.SurveyTypeName is coming from.
<li ng-repeat="SurveyType in SurveyTypes">
<input type="radio" name="SurveyTypeName" ng-model="$parent.rdoSelected" ng-value="SurveyType.SurveyTypeName" />
{{SurveyType.Name}}
</li>
PLUNKER
I have the following checkbox which i filter, but when i delete the filter the checkboxes are lost. I understand why - but Angular won't let me attach the checked value to my ng-model because it is read only.
HTML :
<div class="modal-content">
<strong>ENTITIES</strong>
<div>
<div>
<input type="text" placeholder="Search" ng-model="simpleFilter">
<button type="button" ng-click="showModal=false">Ok</button>
</div>
</div>
<br/>
<div ng-repeat="entity in entityArray | filter:simpleFilter">
<label>
<input style="display: inline-block;
margin-top: 5px;"
type="checkbox" ng-model="entity.checked"
ng-change="getEntityFromModal(entity, entity.checked)" />
<a>{{entity}}</a>
</label>
</div>
</div>
I'm trying to pass the entity.checked value to a function, I'm not even sure if it evaluates to truthy if checked or falsey if not, but the error occurs before this, it simply won't let me attach checked to entity.
plunker https://plnkr.co/edit/2ptIAdOyaIw8mGqpU7Cp?p=preview - open up console and try to check a box.
You will need to create the property in model that you are binding the view with.
edit the $scope.entityArray as below:
$scope.entityArray = [{'val':11,'checked':false},{'val':22,'checked':false},{'val':33,'checked':false}];
Okay so here is my setup i have the following array:
answers = [answer1, answer2]
with these i do the following:
<form>
<div class="col-xs-12" ng-repeat="answer in component.question.answers">
<div class="col-xs-1" style="width: 1%">
<div class="radio">
<label class="i-checks">
<input type="radio" name="a" ng-model="answer.is_correct">
<i></i>
</label>
</div>
</div>
<div class="col-xs-11">
<input type="text" ng-model="answer.answer" class="form-control" placeholder="Svar">
</div>
</div>
</form>
Now the input[radio] are inside the same form as they should. My goal is that when i set one as selected both of the answer objects should be updated so that only one of the object has the value is_correct = true
However what happens right now is that if i click the first and then second both values have is_correct = true
So what can i do?
Radio buttons are used to choose between different values for a single field or, in Angular's case, a single model. The logical solution would be to select the correct answer:
<input type="radio" ng-model="component.question.correctAnswer" ng-value="answer">
If you really need to set a flag you can easily achieve that with a watcher:
$scope.$watch('component.question.correctAnswer', function(correctAnswer) {
component.question.answers.forEach(function(answer) {
answer.is_correct = answer === correctAnswer ? true : false;
});
});
I've been trying to grab hold of the Angular forms applying best practices for form validations, that forced me to use the form name and have all of the models as children of it so that I can bind the formname.$valid and all the other stuff.
However I haven't been able to set predefined values to any of the form sub models as I have no access to them in the controller.
My biggest problem right now is how to check for falsy checkboxes because initially the checkbox is unchecked but there is no value, it only gets populated when clicked to change the value.
Here is my form code
<form name="addAppForm" ng-if="creatingApp == false">
<input type="text" placeholder="App Name" required autofocus ng-model="addAppForm.appName">
<input icheck id="ios" type="checkbox" ng-init="addAppForm.iOS = false" ng-model="addAppForm.iOS">
<label for="ios"><i class="icon-apple"></i> iOS {{addAppForm.iOS}}</label>
<input icheck id="android" type="checkbox" ng-init="addAppForm.android = false" ng-model="addAppForm.android">
<label for="android"><i class="icon-android"></i> Android {{addAppForm.android}}</label>
<button ng-disabled="addAppForm.$invalid && (addAppForm.iOS != true && addAppForm.android != true)" type="submit" ng-click="addNewApp(addAppForm.iOS, addAppForm.android, addAppForm.appName)" class="button front-primary large radius expand">Let's GO!</button>
</form>
The "required" directive doesn't apply to the checkboxes and I've tried initializing the model but with no luck.
When you add a named form like that, it is added to your controller's scope. You can access it inside the controller using the name, similar to in the HTML:
$scope.addAppForm.android;
This should evaluate to true/false any time after the form has been set up, even if it hasn't been clicked yet.
Edit: Fiddle where form is accessed in the controller.
I've figured out what's wrong with my code, the ng-init actually works, I just mixed up the operators here -->> ng-disabled="addAppForm.$invalid && (addAppForm.iOS != true && addAppForm.android != true)"
Should have been ng-disabled="addAppForm.$invalid || (addAppForm.iOS != true && addAppForm.android != true)"
Still the problem persists of not being able to access the form from the controller not even in the same view outside of the form.
I still don't understand why u have to save your data in the Formcontroller u can use a object ( here i call it 'model' ) and put all your form values inside. Your Formcontroller object ( 'addAppForm' ) has functionality and saves validation errors see here : https://docs.angularjs.org/api/ng/type/form.FormController This object is added to the scope of your Controller late in the initialisation of your Controller
see: https://docs.angularjs.org/api/ng/directive/form
Directive that instantiates FormController.
If the name attribute is specified, the form controller is published onto the current scope under this name.
Here is the way to have the form invalid if not at least one checkbox is selected
var myApp = angular.module("myApp", []);
myApp.controller("myController1", function($scope) {
$scope.model = {
"ios": false,
"android": false
};
});
<div ng-app="myApp" ng-controller="myController1">
<form name="addAppForm">
<input type="text" placeholder="App Name" required autofocus ng-model="model.appName" />
<input id="ios" name="ios" type="checkbox" ng-model="model.ios" ng-required="!model.ios && !model.android" />
<label for="ios"><i class="icon-apple"></i> iOS</label>
<input id="android" name="android" type="checkbox" ng-model="model.android" ng-required="!model.ios && !model.android" />
<label for="android"><i class="icon-android"></i> Android</label>
<button ng-disabled="addAppForm.$invalid " type="submit" ng-click="addNewApp(model.ios, model.android, model.appName)" class="button front-primary large radius expand">Let's GO!</button>
</form>
</div>
<script src="https://code.angularjs.org/1.3.8/angular.min.js"></script>