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
Related
I have a form which have textbox,selectbox and checkbox. I want to display the values in the form in a grid table in the same page when the save button is clicked. I was able to display the textbox and selectbox value .But I dont know how to display the selected checkbox value.
HTML code:
<div ng-controller="ProductCtrl">
<form class=rform align="center">
Product Name: <input type="text" name="name" ng-model="newProduct.name" ><br>
Product Category: <select name="catg" ng-model="newProduct.catg" ng-options="x for x in catg" ></select><br>
Tags :<input type="checkbox" name="Electronics" ng-model="newProduct.Electronics" value="Electronics" >Electronics
<input type="checkbox" name="Appliances" ng-model="newProduct.Appliances" value="Appliances">Appliances
<input type="checkbox" name="Others" ng-model="newProduct.Others" value="Books">Others
<input type="hidden" ng-model="newProduct.id" />
<div class="btn"> <button type="submit" ng-click="saveRecord()">Save</button></div>
</form>
<table border="2px" align="center" >
<tr>
<th>Product name</th>
<th>Category</th>
<th>Tag</th>
<th>id</th>
<th>Action</th>
</tr>
<tr ng-repeat="product in products">
<td>{{ product.name }}</td>
<td>{{ product.catg }}</td>
<td>{{ product.tag }}</td>
<td>{{product.id}}</td>
<td> edit |
delete</td>
</tr>
</table>
</div>
controller :
app.controller('ProductCtrl',function($scope,$http){
$scope.catg = ["mobile","TV","Air Conditioner","Kitchen appliances","Footwear","SportsWear","clothes","watches"];
var empid =0;
var id = 0;
$scope.products= [
{ id:'' , 'name': '', 'catg': '', 'tag': '' }
];
$scope.saveRecord = function () {
if ($scope.newProduct.id == null) {
$scope.newProduct.id = empid++;
$scope.products.push($scope.newProduct);
} else {
for (i in $scope.products) {
if ($scope.products[i].id == $scope.newProduct.id) {
$scope.products[i] = $scope.newProduct;
}
}
}
$scope.newProduct = {};
}
$scope.delete = function (id) {
for (i in $scope.products) {
if ($scope.products[i].id == id) {
$scope.products.splice(i, 1);
$scope.newProduct = {};
}
}
}
$scope.edit = function (id) {
for (i in $scope.products) {
if ($scope.products[i].id == id) {
$scope.newProduct = angular.copy($scope.products[i]);
}
}
}
}
);
you can change checkbox's checked/unchecked value from true/false to custom string by ng-true-value(checked) and ng-false-value(unchecked).
and if you want the same feature for radiobutton(guessed from your comment), you can bind custom string to each radio button by ng-value.
refer the below example.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app ng-init="value='YES';value2='option1';">
<label>
<input type="checkbox" ng-model="value" ng-true-value="'YES'" ng-false-value="'NO'">checkbox</label><br> {{value}}
<br>
<label><input type="radio" name="option" ng-model="value2" ng-value="'option1'">{{option1}}</label>
<label><input type="radio" name="option" ng-model="value2" ng-value="'option2'">{{option2}}</label>
<label><input type="radio" name="option" ng-model="value2" ng-value="'option3'">{{option3}}</label>
<br>
{{value2}}
</div>
I am trying to display a table with data from an array in the controller. The html has a few input fields and on clicking submit I store the values in the input fields to the array. I then want to display the values in the table. I use ng-repeat on the tr.
I want the table to refresh and show the nwe data in the array. I am new to angularjs and I think the table should automatically show the new data because of ng-repeat. I'm not sure. If not, how do I refresh the table to show the new values.
But I think the problem is not that, because I added a few values to the array before pushing from the input fields, but the table still doesn't show my hard-coded array data.
The html(the table with ng-repeat is at the bottom and ng-controller at the top ):
<div class="content rows" ng-controller="mainController" >
<div class="navigationClass col-md-2"> <!-- Navigation DIv-->
<ul class="navColor nav nav-pills nav-stacked">
<li ><a style="color:#ffffff" href="#">Masters</a></li>
<li >Transactions</li>
<li ><a style="color:#ffffff" href="#">Reports</a></li>
<li ><a style="color:#ffffff" href="#">Devices</a></li>
<li class="active"><a style="color:#ffffff" href="#">Employees</a></li>
<li ><a style="color:#ffffff" href="#">Dashboard</a></li>
<li ><a style="color:#ffffff" href="#">Vendors</a></li>
</ul>
</div>
<div class="middle col-md-9 borderClass">
<div class="middle-header borderClass" style="padding-top:15px;padding-bottom:5px;">
<p style="text-align:center;color:#ffffff;">
Employee Registeration
</p>
</div>
<div class="">
<div class="createNewEmployee row" style="padding:5px;">
<div class="emptyDiv col-md-1"></div>
<div class="col-md-4">
<label class="marginClass" for="empId">Enter Employee ID</label>
<input ng-model="employeeID" type="text" id="empId" class="form-control marginClass" placeholder="Employee ID" name="">
<label for="empName" class="marginClass">Enter Employee name</label>
<input ng-model="employeeName" type="text" class="form-control marginClass" placeholder="Employee name" name="">
<label for="empCard" class="marginClass">Enter employee card number</label>
<input ng-model="employeeCardNumber" type="text" id="empCard" class="form-control marginClass" placeholder="Card number" name="">
<label for="doj" class="marginClass">Select employee DOJ</label>
<input ng-model="scopeDoj" type="text" id="doj" class="form-control marginClass" placeholder="DOJ" name="">
</div>
<div class="emptyDiv col-md-1"></div>
<div class="col-md-4">
<div class="form-group">
<label class="marginClass" for="categoryDropdown">Select category</label>
<select ng-model="employeeCategory" class="form-control marginClass" id="categoryDropdown">
<option>Company employee</option>
<option>Contract workman</option>
<option>Manager</option>
</select>
</div>
<div class="form-group">
<label class="marginClass" for="departmentDropdown">Select deparment</label>
<select ng-model="employeeDepartment" class="form-control marginClass" id="departmentDropdown">
<option>Pulp mill(Operation)</option>
<option>Stock preparation</option>
<option>Paper machine(Operation)</option>
<option>Finishing house</option>
<option>Paper machine(O)-V</option>
<option>SFT Street-C</option>
</select>
</div>
<div class="[ form-group ]" style="margin:5px; margin-top:25px;">
<input type="checkbox"
ng-model="activeOrInactive"
ng-true-value="'active'"
ng-false-value="'inactive'"
name="fancy-checkbox-default" id="activeID" autocomplete="off" />
<div class="[ btn-group ]">
<label class="" for="activeID">
Employee active
</label>
</div>
</div>
<div class="[ form-group ]" style="margin:5px; margin-top:25px;">
<input type="checkbox"
ng-model = "fingerprintActiveOrInactive"
ng-true-value="'fingeractive'"
ng-false-value="'fingerinactive'"
style="" name="fancy-checkbox-default" id="fingerprintActiveID" autocomplete="off" />
<div class="[ btn-group ]">
<label class="" for="fingerprintActiveID">
Fingerprint bio status active
</label>
</div>
</div>
</div>
<div class="emptyDiv col-md-2">
</div>
</div>
<p style="text-align:center"><button ng-click="addNewEmployee()" class="btn btn-primary">Submit</button></p>
</div>
<form class="form-inline" style="margin:20px;">
<div class="searchEmployee">
<div class="form-group">
<p>
<label class="marginClass" for="searchBox">Search employee</label>
<input id="searchBox" type="text" class="form-control" placeholder="Type here to search" name="">
</p>
</div>
</div>
</form>
<div class = "theTable" style="border:1px thin #ff0000;">
<table class="table table-hover table-bordered" style="margin-bottom:1px;">
<thead>
<th>Employee ID</th>
<th>Employee name</th>
<th>Card number</th>
<th>DOJ</th>
<th>Department</th>
<th>Category</th>
<th>Status</th>
<th>Edit/Delete</th>
</thead>
<tbody>
<tr ng-repeat="employee in newEmployeeArray">
<td>{{employee.empid}}</td>
<td>{{employee.empname}}</td>
<td>{{employee.empcardnumber}}</td>
<td>{{employee.doj}}</td>
<td>{{employee.empcategory}}</td>
<td>{{employee.empdepartment}}</td>
<td>{{employee.empactive}}</td>
<td>{{employee.empfingerprint}}</td>
<td><a title="Edit" href="#" style="text-align:center;text-decoration:none">
<span class="glyphicon glyphicon-pencil"></span></a><a title="Edit" href="#">
<span title="Delete" class="glyphicon glyphicon-trash"></span></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
The controller:
var app = angular.module('itc-app', ['ngRoute']);
app.controller('mainController',function($scope,$route,$timeout){
$scope.employeeID="";
$scope.employeeName="";
$scope.employeeCardNumber="";
$scope.scopeDoj="";
$scope.employeeCategory="Company employee";
$scope.employeeDepartment="Pulp mill(Operation)";
$scope.activeOrInactive="inactive";
$scope.fingerprintActiveOrInactive = "fingerinactive";
// $scope.newEmployeeScopeArray;
var newEmployeeArray = [
{
empid:'a',empname:'a',empcardnumber:'',doj:'',
empcategory:'',empdepartment:'',empactive:'',
empdepartment:'',empactive:'',empfingerprint:'',
empty:''
}
];
$scope.addNewEmployee = function(){
$timeout(function(){
newEmployeeArray.push({
empid:$scope.employeeID,
empname:$scope.employeeName,
empcardnumber:$scope.employeeCardNumber,
doj:$scope.scopeDoj,
empcategory:$scope.employeeCategory,
empdepartment:$scope.employeeDepartment,
empactive:$scope.activeOrInactive,
empfingerprint:$scope.fingerprintActiveOrInactive,
empty:''
});
// $route.reload();
$scope.employeeID="";
$scope.employeeName="";
$scope.employeeCardNumber="";
$scope.scopeDoj="";
$scope.activeOrInactive="inactive";
$scope.fingerprintActiveOrInactive = "fingerinactive";
console.log(newEmployeeArray);
},1000);
}
})
You just forgot to add newEmployeeArrayto your controllers $scope. When you do that, than pushing a new entry to that array will automatically update your view via ng-repeat.
newEmplyoeeArray is not visible from the $scope. You need to write
$scope.newEmployeeArray = [
{
empid:'a',empname:'a',empcardnumber:'',doj:'',
empcategory:'',empdepartment:'',empactive:'',
empdepartment:'',empactive:'',empfingerprint:'',
empty:''
}
];
instead of var newEmployeeArray.
Two things:
1) Please use the $scope for newEmployeeArray ($scope.newEmployeearray = .....)
Only the variable in the scope are watched for changes. That's the reason your view is not getting updated when the array is updated
2) You don't need to put the newEmployeeArray.push... inside the $timeout. $timeout would wait for the cycle to be completed and then push which would again change the scope and start a new cycle. This would hamper the performance.
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'm trying to add dynamic rows as textbox to table using angularjs its adding but I'm not getting how to get the data from the text box and to store in array?
Code:
<div class="col-lg-12 form-group">
<div class="col-lg-12 fade-in tada" style="padding-top:10px">
<table ng-table="tableParams" class="display table table-striped table-bordered">
<tr ng-repeat="cap in data">
<td data-title="'Group'" sortable="group">
<input type="text" ng-model="group" />
</td>
<td data-title="'status'" sortable="Status">
<input type="text" ng-model="Status" />
</td>
<td data-title="'Type'" sortable="type">
<input type="text" ng-model="type" />
</td>
<td data-title="'Enable'" sortable="Enable">
<input type="text" ng-model="Enable" />
</td>
<td data-title="'Line Type'" sortable="LineType">
<input type="text" ng-model="LineType" />
</td>
<td data-title="'Description'" sortable="Dec">
<input type="text" ng-model="Dec" />
</td>
</tr>
</table>
</div>
<div class="col-lg-12">
<div class="pull-right" style="padding-right:10px">
<input type="submit" ng-click="bulk.submitFileset('process')" class="btn btn-default" value="Save" />
</div>
<div class="pull-right">
<input type="submit" ng-click="addFormField()" class="btn btn-default" value="Add" />
</div>
</div>
</div>
JS File:
(function() {
var app = angular.module('arcadminmodule', ['ngTable', 'ui-notification']);
app.controller('ArcAdminController', ['$http', '$scope', '$filter', 'ngTableParams', 'Notification', function($http, $scope, $filter, ngTableParams, Notification) {
$scope.data = [];
$scope.addFormField = function() {
$scope.data.push('')
$scope.tableParams.reload();
}
}]);
})();
I think you need to change the your html like below.
HTML
<tr ng-repeat="cap in data">
<td data-title="'Group'" sortable="group">
<input type="text" ng-model="cap.group" />
</td>
<td data-title="'status'" sortable="Status">
<input type="text" ng-model="cap.Status" />
</td>
<td data-title="'Type'" sortable="type">
<input type="text" ng-model="cap.type" />
</td>
<td data-title="'Enable'" sortable="Enable">
<input type="text" ng-model="cap.Enable" />
</td>
<td data-title="'Line Type'" sortable="LineType">
<input type="text" ng-model="cap.LineType" />
</td>
<td data-title="'Description'" sortable="Dec">
<input type="text" ng-model="cap.Dec" />
</td>
</tr>
Then you controller function would change like below
Code
$scope.addFormField = function() {
$scope.data.push({})
$scope.tableParams.reload();
};