I want to track the expanded row and save that form with city and work details, the problem is while clicking on the particular row it's expanding with form but I can't able to track that row...
var app = angular.module('app', ['ngAnimate']);
app.controller('itemsController', function( $scope ) {
$scope.divisions = [{id:12, div_name:' city1'},
{id:13, div_name:' city2'},
{id:14, div_name:' city3'}];
$scope.works =[{wid:111, w_name:'work1'},
{wid:222, w_name:'work2'},
{wid:333, w_name:'work3'}];
});
html
<div ng-controller="itemsController" class="box">
<table border="1">
<tbody ng-repeat-start="division in divisions">
<td>
{{division.div_name}}
<em>{{expanded}}</em>
</td>
<td>Values: {{divisions.length}}</td>
<td>
<button type="button" ng-click="expanded = !expanded">
Expand
</button>
</td>
</tbody>
<tbody ng-repeat-end ng-show="expanded">
<td colspan="3">
<select ng-model="result.division.tt">
<option value='01'>tt1..........</option>
<option value='02'>tt2..........</option>
</select><br/><br/>
<ul ng-repeat="work in works">
{{work.w_name}} <input type=text />
</ul><br/><br/>
<button ng-click="save()">save</button>
</td>
</tbody>
</table>{{result |json}}
link - http://jsfiddle.net/raju10281/eqk6attx/18/
Thank You in advance!!!
Try this solution. You should create object(ng-init='data={}') for each ng-repeat. It will present content of each form, then you can use it inside your controller(ng-click="save(division, data)") with appropriate division:
<tbody ng-repeat-end ng-show="expanded" ng-init='data={id:division.id,div_name:division.div_name,works:[]}'>
<td colspan="3">
<select ng-model="data.tt">
<option value='01'>tt1..........</option>
<option value='02'>tt2..........</option>
</select><br/><br/>
<ul ng-repeat="work in works" ng-init='data.works[$index]={wid:work.wid,w_name:work.w_name}'>
{{work.w_name}} <input type=text ng-model='data.works[$index].input' />
</ul><br/><br/>
<button ng-click="save(division, data)">save</button>
</td>
</tbody>
I want to pass two values in select dropdown.
Here is my code.
<tbody>
<tr ng-repeat="x in studyTeamObj" align="center">
<td>
<select class="form-control" ng-model="x.Designation">
<option value=""></option>
<option ng-repeat="x in createStudyObj.Study_User"
value="{{x.Designation}}">{{x.Emp_Name}}
</option>
</select>
</td>
<td>
{{x.Emp_Id}}
</td>
<td>
{{x.Designation}}
</td>
<td class="mdrf-add-row-col">
<i class="fa fa-minus-circle"
data-ng-click="deleteMem($index)"></i>
</td>
</tr>
</tbody>
This is what the data I am getting from {{createStudyObj.Study_User}}
[{"Emp_Name":"mdrf","Emp_Id":2,"Designation":"Research Dietitian","DesignationID":20},{"Emp_Name":"Sudha","Emp_Id":1045,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1046,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1047,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1048,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1049,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"fdgedd","Emp_Id":1050,"Designation":"MDRF HOD","DesignationID":16}]
when I click on emp name from the dropdown,it should fetch Emp_Id and Designation.But I am getting only the Designation.Plz help
Assign object to value instead of one property. That's way whole object bind to ng-model and you can filter relevant properties from that.
<option ng-repeat="x in createStudyObj.Study_User"value="{{x}}">{{x.Emp_Name}}
</option>
The downfall of this is when u access the model variable from the controller value assign as string. so you need to parse the value to object using JSON.parse()
$scope.designation = JSON.parse($scope.designation)
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.createStudyObj = {};
$scope.createStudyObj.Study_User = [{"Emp_Name":"mdrf","Emp_Id":2,"Designation":"Research Dietitian","DesignationID":20},{"Emp_Name":"Sudha","Emp_Id":1045,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1046,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1047,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1048,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1049,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"fdgedd","Emp_Id":1050,"Designation":"MDRF HOD","DesignationID":16}]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table>
<tbody>
<tr >
<td>
<select class="form-control" ng-model="designation">
<option value=""></option>
<option ng-repeat="x in createStudyObj.Study_User"
value="{{x}}">{{x.Emp_Name}}
</option>
</select>
</td>
<td>
{{designation}}
</td>
<td class="mdrf-add-row-col">
<i class="fa fa-minus-circle"
data-ng-click="deleteMem($index)"></i>
</td>
</tr>
</tbody>
</table>
</div>
But I recommend to use ng-options instead of the ng-repeat
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.createStudyObj = {};
$scope.createStudyObj.Study_User = [{"Emp_Name":"mdrf","Emp_Id":2,"Designation":"Research Dietitian","DesignationID":20},{"Emp_Name":"Sudha","Emp_Id":1045,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1046,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1047,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1048,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1049,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"fdgedd","Emp_Id":1050,"Designation":"MDRF HOD","DesignationID":16}]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table>
<tbody>
<tr >
<td>
<select class="form-control" ng-model="designation" ng-options="item as item.Emp_Name for item in createStudyObj.Study_User">
<option value=""></option>
</select>
</td>
<td>
{{designation}}
</td>
<td class="mdrf-add-row-col">
<i class="fa fa-minus-circle"
data-ng-click="deleteMem($index)"></i>
</td>
</tr>
</tbody>
</table>
</div>
You should be using ng-options instead of building your own options list. https://docs.angularjs.org/api/ng/directive/ngOptions
If you have problems with that, add those questions up top and I will update my answer.
I need to make a filter over a table in Angular js. I have this code, but I doesn't work. Here, I have 2 dropdowns: for eat_code and feeling_code and I would like to filter the rows after selecting each of them.
<div class="widgets">
<div class="row">
<div class="col-md-12">
<div class ="panel">
<div class="panel-heading">
<h3 class="panel-title">Select PID</h3>
</div>
<div class="panel-body">
<form class="row form-inline ng-pristine ng-valid ng-scope"
novalidate name="getBGsForm">
<div class="form-group col-sm-3 col-xs-6"
ng-class="{'has-error': getBGsForm.patientID.$invalid && (getBGsForm.patientID.$dirty || getBGsForm.$submitted)}">
<input type="text" class="form-control"
ng-model="patientID"
placeholder="PID"
required name="patientID">
<span class="help-block error-block basic-block"
ng-if="getBGsForm.patientID.$error.required">Patient ID is required.</span>
</div>
<button type="submit"
class="btn btn-primary"
ng-click="getBGs()">Show BGs</button>
</form>
</div>
</div>
<div ba-panel>
<div>
<div class="col-md-4">
<select class="form-control"
ng-model="search.eat_code"
ng-options="v.code as (v.code + ' - ' + v.label) for v in dropdownValuesTag">
<option value=""> --- filter by meal tag --- </option>
</select>
</div>
<div class="col-md-4">
<select class="form-control"
ng-model="search.feeling_code"
ng-options="v.code as (v.code + ' - ' + v.label) for v in dropdownValuesSource">
<option value=""> --- filter by source --- </option>
</select>
</div>
</div>
</div>
<div ba-panel>
<div class="horizontal-scroll">
<div class="form-group select-page-size-wrap ">
<label>Rows on page
<select class="form-control selectpicker show-tick"
title="Rows on page" selectpicker
ng-model="smartTablePageSizeBG"
ng-options="i for i in [5, 10, 15, 20, 25]">
</select>
</label>
</div>
</div>
<table class="table" st-table="displayedCollectionBG" st-safe-src="smartTableDataBG" st-set-filter = "myStrictFilter">
<thead>
<tr class="sortable ">
<th st-sort="id">Reading Id</th>
<th st-sort="value">Value</th>
<th st-sort="unit">Unit</th>
<th st-sort="timestamp">Timestamp</th>
<th st-sort="is_control">Is Control</th>
<th st-sort="source">Source</th>
<th st-sort="eat_code">Eat Code</th>
<th st-sort="feeling_code">Feeling Code</th>
<th st-sort="carb"> Carb</th>
<th st-sort="note"> Note</th>
<th st-sort="storedTimestamp">Stored Timestamp</th>
<th st-sort="adaTargetRangeStatus">adaTargetRangeStatus</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in displayedCollectionBG | filter: search">
<td class="table-id">{{item.id}}</td>
<td>{{item.value}}</td>
<td>mg/dl</td>
<td><span ng-bind="item.timestamp | date:'MM / dd / yyyy hh:mm:ss a'"></span></td>
<td>{{item.tags.is_control}}</td>
<td>{{item.tags.source}}</td>
<td>{{item.tags.eat_code}}</td>
<td>{{item.tags.feeling_code}}</td>
<td>{{item.tags.carb}}</td>
<td>{{item.tags.note}}</td>
<td><span ng-bind="item.storedTimestamp | date:'MM / dd / yyyy hh:mm:ss a'"></span></td>
<td>{{item.adaTargetRangeStatus}}</td>
<td>
<div class="buttons">
<a class="btn btn-primary editable-table-button btn-xs" ui-sref="BGs.form({id: {{item.id}}})" ui-sref-opts="{reload: true}">Edit</a>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6" class="text-center">
<div st-pagination="" st-items-by-page="smartTablePageSizeBG" st-displayed-pages="5"></div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
What am I doing wrong? Thank you!
Try this : click here
From it, you have to select 'Ajax column filter support (NEW!)' and right side you will get demo, just click on every column's header, you will get column based filter.
good evening, I'm currently faced with a little challenge here.
I need to remove a checklist item from a list of section(there are list of sections and each section has a list of checklist items too). My html is shown thus.
<div ng-repeat="section in item.supervisionItemSectionSetupModels" >
<div class="col-md-9 form-horizontal">
<div class="alert alert-success">
<strong>Checklist Section - {{$index+1}}</strong>
<div class="pull-right">
<a href="" ng-show="$index>0" type="button" ng-click="removeSection($index)" class="btn btn-danger" tooltip="Remove this section">
<span class="fa fa-trash-o"></span>
</a>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4">Section Name</label>
<div class="col-sm-7">
<input name="sectionName" ng-model="section.name" placeholder="Section name" class="form-control" id="sectionName" />
</div>
</div>
</div>
<div class="col-md-9">
<table class="table">
<thead>
<tr>
<th>#</th>
<th width="60%">What to Check for</th>
<th>Options</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="checklist in section.checkListItems">
<td>{{$index+1}}</td>
<td>
<input type="text" class="form-control" ng-model="checklist.name" style="width: 100%" name="name" placeholder="Checklist Item"/>
</td>
<td>
<select class="form-control col-sm-3" ng-model="checklist.options" name="options"
ng-options="option.options as option.groupName for option in checklistOption">
<option value="">--Select--</option>
</select>
</td>
<td>
<a href="" ng-show="$index>0" ng-click="removeCheckListItem($index)" class="btn btn-xs btn-danger" tooltip="Remove this checklist">
<span class="fa fa-trash-o"></span>
</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">
Add
</th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="form-group col-md-9">
Add new section
</div>
While my angularJs code is(in typescript..)
removeCheckListItem(index) {
this.$scope.item.supervisionItemSectionSetupModels[index].checkListItems.splice(index, 1);
}
addChecklistitem(index) {
this.$scope.item.supervisionItemSectionSetupModels[index].checkListItems.push({});
}
addSection(): void {
this.$scope.item.supervisionItemSectionSetupModels.push({ checkListItems: [{}]});
}
removeSection(index) {
this.$scope.item.supervisionItemSectionSetupModels.splice(index, 1);
}
Each time I tried removing a checklist in a section with the index, I get this error message
Error: this.$scope.item.supervisionItemSectionSetupModels[n] is undefined
The addSection method works fine, but the remove checklist is not working
After going through my code, i discovered that in my view, the index been passed to my removeChecklistItem method is the current index of the checklist item of which it's different for the section index. You can see the method body has some issues, I've ruminated on it but it seems I'm not doing the right thing. What am I supposed to do please?
I replaced $index with $parent.$index and it worked fine
<div ng-repeat="section in item.supervisionItemSectionSetupModels" >
<div class="col-md-9 form-horizontal">
<div class="alert alert-success">
<strong>Checklist Section - {{$index+1}}</strong>
<div class="pull-right">
<a href="" ng-show="$index>0" type="button" ng-click="removeSection($index)" class="btn btn-danger" tooltip="Remove this section">
<span class="fa fa-trash-o"></span>
</a>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4">Section Name</label>
<div class="col-sm-7">
<input name="sectionName" ng-model="section.name" placeholder="Section name" class="form-control" id="sectionName" />
</div>
</div>
</div>
<div class="col-md-9">
<table class="table">
<thead>
<tr>
<th>#</th>
<th width="60%">What to Check for</th>
<th>Options</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="checklist in section.checkListItems">
<td>{{$index+1}}</td>
<td> <input type="text" class="form-control" ng-model="checklist.name" style="width: 100%" name="name" placeholder="Checklist Item"/> </td>
<td>
<select class="form-control col-sm-3" ng-model="checklist.options" name="options" ng-options="option.options as option.groupName for option in checklistOption">
<option value="">--Select--</option>
</select>
</td>
<td>
<a href="" ng-show="$index>0"
ng-click="removeCheckListItem($parent.$index)"
class="btn btn-xs btn-danger" tooltip="Remove this checklist">
<span class="fa fa-trash-o"></span>
</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">
Add
</th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="form-group col-md-9">
Add new section
</div>
How to validate the input elements before performing any operation, I have four html input element and html table when you click item on add to list it added item in HTML table now my problem is validation, I want to validate input elements on button click.
<div ng-controller="BookStore">
<br />
<h2>Add New Book</h2>
<div style="border: 1px solid blue;">
<table>
<tr>
<td>ISBN: </td>
<td>
<input type="text" ng-model="item.ISBN" />
</td>
</tr>
<tr>
<td>Name: </td>
<td>
<input type="text" ng-model="item.Name" /></td>
</tr>
<tr>
<td>Price(In Rupee): </td>
<td>
<input type="number" ng-model="item.Price" /></td>
</tr>
<tr>
<td>Quantity: </td>
<td>
<input type="number" ng-model="item.Quantity" /></td>
</tr>
<tr>
<td colspan="2">
<input type="Button" value="Add to list" ng-click="addItem(item)" />
</td>
</tr>
</table>
</div>
<div style="padding-top: 15px;">
<table border="1" class="mytable">
<tr>
<td>ISBN</td>
<td>Name</td>
<td>Price</td>
<td>Quantity</td>
<td>Total Price</td>
<td>Action</td>
</tr>
<tr ng-repeat="item in items">
<td>{{item.ISBN}}</td>
<td>
<span ng-hide="editMode">{{item.Name}}</span>
<input type="text" ng-show="editMode" ng-model="item.Name" />
</td>
<td>
<span ng-hide="editMode">{{item.Price}}</span>
<input type="number" ng-show="editMode" ng-model="item.Price" /></td>
<td>
<span ng-hide="editMode">{{item.Quantity}}</span>
<input type="number" ng-show="editMode" ng-model="item.Quantity" /></td>
<td>{{(item.Quantity) * (item.Price)}}</td>
<td><span>
<button type="submit" ng-hide="editMode" ng-click="editMode = true; editItem(item)">Edit</button></span>
<span>
<button type="submit" ng-show="editMode" ng-click="editMode = false">Save</button></span>
<span>
<input type="button" value="Delete" ng-click="removeItem($index)" /></span></td>
</tr>
<tr ng-show="!(items).length">
<td style="text-align: center" colspan="7">No item exist</td>
</tr>
</table>
</div>
<br />
<div style="font-weight: bold">Grand Total: {{totalPrice()}}</div>
<br />
</div>
Click here to see code
You need to use validation of the form. For this wrap your table into form tag and use ngSubmit directive (or ngClick on the type="submit" button).
In your case you want required constraint added to form fields. Then it makes sense to disable submit button until form is valid ng-disabled="bookForm.$invalid".
All together:
<form novalidate ng-submit="addItem(item)" name="bookForm">
<table>
<tr>
<td>ISBN: </td>
<td>
<input type="text" ng-model="item.ISBN" required />
</td>
</tr>
<tr>
<td>Name: </td>
<td>
<input type="text" ng-model="item.Name" required />
</td>
</tr>
<tr>
<td>Price(In Rupee): </td>
<td>
<input type="number" ng-model="item.Price" required />
</td>
</tr>
<tr>
<td>Quantity: </td>
<td>
<input type="number" ng-model="item.Quantity" required />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" ng-disabled="bookForm.$invalid" value="Add to list" />
</td>
</tr>
</table>
</form>
Demo: http://plnkr.co/edit/JIozQNai88dHipaIfeLH?p=preview
i have found the answer i make button disabled when the texboxes are empty
<div class="col-xs-12 col-sm-12">
<button class="btn btn-xs btn-primary" type="button" value="Add To List" ng-disabled="!item.Description || !item.FileName || !item.Path" ng-click="item.Description;addItem(item)">Add</button>
</div>
Click Here to see the plunker code