i want to default selected object value from radio button which is in
ng-repeat. `checkbox is working fine.`
My Html
<tr ng-repeat="question in Questions" ng-init="Pindex = $index">
<td ng-if="question.answerKeyModel.length <= 0" colspan="3"><strong>{{question.Question}}</strong></td>
<td ng-if="question.answerKeyModel.length > 0 && question.IsGroupQuestion !=true" class="pad-L20">{{question.Question}}</td>
<td ng-if="question.answerKeyModel.length > 0 && question.IsGroupQuestion ==true"><strong>{{question.Question}}</strong></td>
<td align="center" ng-repeat="answerKey in question.answerKeyModel">
<div ng-if="question.Type=='checkbox'" class="check_box">
<input type="checkbox" name="checkbox{{Pindex}}{{$index}}" id="checkbox{{Pindex}}{{$index}}"
ng-true-value="{{answerKey}}" ng-false-value=""
ng-model="question.Answer[$index]" ng-value="answerKey" />
<label for="checkbox{{Pindex}}{{$index}}"> </label>
</div>
<div ng-if="question.Type=='radio'" class="radio_box">
<input type="radio" name="Answer{{Pindex}}" id="radio{{Pindex}}{{$index}}"
ng-model="question.Answer[0]" ng-value="answerKey" />
<label for="radio{{Pindex}}{{$index}}"> </label>
</div>
</td>
</tr>
and my controller is
OpiodRiskToolFactory.GetQuestions($state.current.name, PatientInfo.Id).then(function (data) {
$scope.Questions = data;
});
i don't want to do extra work in controller
ng-fileupload having injection error on angular 1.2.3 my source code attached here
<!DOCTYPE html>
<html ng-app ="dashboard">
<head>
<title></title>
<script src="angular.min.js"></script>
<script src="angular-ui-router.js"></script>
</head>
<body>
<div class="box-content">
<form ng-controller="mycontroller as up" name="up.upload_form">
<table cellspacing="10" cellpadding="10" style="margin-left: 5%; cellspacing= 7;">
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Name</label></td>
<td>
<input type="text" name="coursename" ng-model=" up.coursename" placeholder="Enter course name here" class="form-control">
</td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Code</label></td>
<td><input type="text" name="coursecode" ng-model=" up.coursecode" placeholder="Enter course code here" class="form-control"></td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Title</label></td>
<td><input type="text" name="coursetitle" ng-model=" up.coursetitle" placeholder="Enter course title here" class="form-control"></td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Authur</label></td>
<td> <input type="text" name="courseauthor" ng-model=" up.courseauthor" placeholder="Enter author name here" class="form-control"></td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Discription</label></td>
<td><textarea name="coursediscription" ng-model=" up.coursediscription" placeholder="Enter course description here"></textarea></td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course urlpath</label></td>
<td> <input type="text" name="courseurlpath" ng-model=" up.courseurlpath" placeholder="Enter course url path here" class="form-control"></td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Start Date</label></td>
<td> <input type="date" name="coursestartingdate" ng-model=" up.coursestartingdate" placeholder="start" class="form-control"></td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course End Date</label></td>
<td><input type="date" name="courseendingdate" ng-model=" up.courseendingdate" placeholder="end" class="form-control"></td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Attachments</label></td>
<td><input type="file" ngf-select ng-model="up.file" name="file" ngf-pattern="'image/*,application/pdf'" accept="image/*,application/pdf" ngf-max-size="20MB" class="form-control">
</td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Video</label></td>
<td><input type="file" ngf-select ng-model="up.file1" name="file1" ngf-pattern="'image/*,application/pdf'" accept="image/*,application/pdf" ngf-max-size="20MB" class="form-control">
</td>
</tr>
<tr>
<td>
Image thumbnail: <img style="width:100px;" ng-show="!!up.file" ngf-thumbnail="up.file || '/thumb.jpg'" />
</td>
<td>
<i ng-show="up.upload_form.file.$error.required">*required</i><br>
<i ng-show="up.upload_form.file.$error.maxSize">File too large
{{up.file.size / 1000000|number:1}}MB: max 20M</i>
</td>
</tr>
<tr>
<td>
<button type="submit" ng-click="up.submit()" class="btn btn-success">submit</button>
<p>{{up.progress}}</p>
</form>
</td>
</tr>
<br>
</table>
</form>
</div>
</body>
<script type="text/javascript">
//var dashboard = angular.module('dashboard', ['Upload','$window''ngRoute']);
var dashboard = angular.module('dashboard', ['ui.router','Upload','$window']);
dashboard.controller('mycontroller',['Upload', '$window',function($scope,Upload, $window){
var vm = this;
vm.submit = function() {
alert("HAi")
//function to call on form submit
/* if (vm.upload_form.file.$valid && vm.file) {*/
//check if from is valid
/*vm.upload(vm.file, vm.file1, vm.coursename, vm.coursecode, vm.coursetitle, vm.courseauthor, vm.coursediscription, vm.courseurlpath, vm.coursestartingdate, vm.courseendingdate); //call upload function*/
// }
}
}]);
/* dashboard.controller('MyCtrl', ['Upload', '$window', function(Upload, $window) {
var vm = this;
vm.submit = function() {
//function to call on form submit
if (vm.upload_form.file.$valid && vm.file) {
//check if from is valid
vm.upload(vm.file, vm.file1, vm.coursename, vm.coursecode, vm.coursetitle, vm.courseauthor, vm.coursediscription, vm.courseurlpath, vm.coursestartingdate, vm.courseendingdate); //call upload function
}
}
vm.upload = function(file, file1, coursename, coursecode, coursetitle, courseauthor, coursediscription, courseurlpath, coursestartingdate, courseendingdate) {
alert("success");
Upload.upload({
url: 'http://192.168.1.16:8080/courseapi/create', //webAPI exposed to upload the file
data: {
file: file,
file1: file1,
coursename: coursename,
coursecode: coursecode,
coursetitle: coursetitle,
courseauthor: courseauthor,
coursediscription: coursediscription,
courseurlpath: courseurlpath,
coursestartingdate: coursestartingdate,
courseendingdate: courseendingdate
} //pass file as data, should be user ng-model
}).then(function(resp) {
console.log("Upload file::::" + JSON.stringify(resp));
//upload function returns a promise
if (resp.data.success === true) {
//validate success
$window.alert(resp.config.data.file.name + ' Successfully uploaded.');
} else {
$window.alert('an error occured');
}
}, function(resp) {
//catch error
console.log('Error status: ' + resp.status);
$window.alert('Error status: ' + resp.status);
}, function(evt) {
console.log(evt);
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
vm.progress = 'progress: ' + progressPercentage + '% '; // capture upload progress
});
};
}]);*/
</script>
</html>
unable to hit angularjs controller
Error stack:angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.3/$injector/modulerr?p0=dashboard&p1=Error%…0A%20%20%20%20at%20e%20(http%3A%2F%2Flocalhost%2Fangular.min.js%3A28%3A374)
You don't have to inject $window and Upload to a module unless they are angualr modules,
So it should be,
var dashboard = angular.module('dashboard', ['ui.router']);
You are not injecting $scope to your function, change your controller like this,
dashboard.controller('mycontroller',['$scope','$window', 'Upload',function($scope,$window, Upload){
}]);
I am practicing my angular.js and form validation. I want to make it so that the form won't submit when I click submit if variables user_valid and pass_valid are false. I do thus perfectly fine when writing code outside of angularjs by calling return false;.
But when work in angular.js, and insert ng-submit='loginVal()', and type in my controller:`
logApp.controller('logForm', function($scope, $http){
user_valid = false;
pass_valid = false;
$scope.loginVal = function(){
if (user_valid == false && pass_valid == false){
return false;
console.log('Submit Stopped');
}
}`
...
});
The form still submits, and it shows in console Navigated to ~form-action url~. I don't know why it is submitting. The rest of the functions in the controller have nothing related to this function, so i excluded it.
HTML:
<form name='login' method="post" action="" ng-submit='loginVal()'>
{% csrf_token %}
<!-- LOGIN FORM -->
<table id='show-table'>
<tr>
<td width='20%'>Username</td>
<td width="80%">
<div class='col-md-12' id='userField'>
<input name='name' type="text" ng-model='username' ng-change='checkName()'/>
<div id='success'></div>
<div id='failure'></div>
</div>
</td>
</tr>
<tr>
<td>Password</td>
<td>
<div class='col-md-12'>
<input name="pwd" type="password" ng-model='password' />
</div>
</td>
</tr>
<td></td>
<td><input type="submit" value="Login" id='loginSubmit' disabled /></td>
</tr>
</table>
</form>
Remove the action and the method attributes in the form tag
EDIT
Look at this fiddle: https://jsfiddle.net/80Laf822/1/
<div ng-controller="FormController">
<form name='loginForm' method="post" action="" ng-submit='loginVal()'>
<!-- LOGIN FORM -->
<table id='show-table'>
<tr>
<td width='20%'>Username</td>
<td width="80%">
<div class='col-md-12' id='userField'>
<input name='name' type="text" ng-model='username' required/>
<div id='success'></div>
<div id='failure'></div>
</div>
</td>
</tr>
<tr>
<td>Password</td>
<td>
<div class='col-md-12'>
<input name="pwd" type="password" ng-model='password' required/>
</div>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Login" id='loginSubmit' ng-disabled="loginForm.$invalid" />
</td>
</tr>
</table>
</form>
</div>
You can use the required attribute in the input and the property $invalid of the form to automatically disable or enable the button if the form is valid or not. You can do all type of things like patterns, max-length, min-lenght ...
I have made simple example: http://codepen.io/anon/pen/VLpYJm?editors=101
In this example I need to get field.type and using it with ng-switch.
<div ng-app="app">
<table ng-controller="tableController">
<tr ng-repeat="item in items">
<td>
{{item}}
</td>
<td>
<select ng-model="item" ng-options="field.label for field in fields track by field.name" required="required" />
</td>
<td>
<div ng-switch on="item.type">
<div ng-switch-when="BOOLEAN">
<input ng-model="item.value" type="checkbox" />
</div>
<div ng-switch-default>
<input ng-model="item.value" type="text" class="form-control" required="">
</div>
</div>
</td>
<td>{{selected}}</td>
</tr>
</table>
</div>
I have a view where I want to iterate a list in the model to render the view, the current code is something like
<form method="Post">
<table class="table">
#Each
<tr>
<td>
<input type="hidden" name="Id[]" value="#Current.Id" />#Current.Id
</td>
<td>
<input type="text" name="Name[]" value="#Current.Name"/>
</td>
<td>
<input type="text" name="Code[]" value="#Current.Code"/>
</td>
<td>
<button type="submit">Submit</button>
</td>
</tr>
#EndEach
</table>
</form>
What I actually wish to do is
<form method="Post">
<table class="table">
#Each
<tr>
<td>
<input type="hidden" name="Id[#CurrentIndex]" value="#Current.Id" />#Current.Id
</td>
<td>
<input type="text" name="Name[#CurrentIndex]" value="#Current.Name"/>
</td>
<td>
<input type="text" name="Code[#CurrentIndex]" value="#Current.Code"/>
</td>
<td>
<button type="submit">Submit</button>
</td>
</tr>
#EndEach
</table>
</form>
where #CurrentIndex will insert the list index.
List index can then be used to bind the property to a list during POST with something like
Post["/"] = _ => {
var list = this.Bind<List<Model>>();
...... do something with list .........
}
SSVE is "dumb", there's no way to execute any arbitrary code. The only way to do this would be to put the index into your model, you can do it with LINQ with something like (not compiled, just typed from memory):
var indexedModel = model.Select((m,i) => new { Index = i, Model = m });
Then in your view do something like:
<form method="Post">
<table class="table">
#Each
<tr>
<td>
<input type="hidden" name="Id[#Current.Index]" value="#Current.Model.Id" />#Current.Id
</td>
<td>
<input type="text" name="Name[#Current.Index]" value="#Current.Model.Name"/>
</td>
<td>
<input type="text" name="Code[#Current.Index]" value="#Current.Model.Code"/>
</td>
<td>
<button type="submit">Submit</button>
</td>
</tr>
#EndEach
</table>
</form>