I had a view with multiple groups of radio buttons that worked great, but was using a really old version of AngularJS (v1.0.2 as I was playing with an existing fiddle I had found on the net)
Example using AngularJS v1.0.2
As soon as I upgraded to v1.4.8, it stopped working as expected - i.e. only the last group of radio buttons in each panel have their applicable radio button checked while all others groups had no radio buttons checked.
Example with newer version of AngularJS
Has anyone got an idea as to what I may be doing wrong? Any help would be much appreciated. Below is the html involved
<body ng-controller="Channels" class="container-fluid">
<div ng-if="sections===null">
Loading...
</div>
<div class="panel-group" id="accordion1" ng-if="sections!==null">
<div class="panel panel-default" ng-repeat="item in sections | orderBy: 'resourceCode'">
<div class="panel-heading">
<div class="glyphicon glyphicon-plus-sign text-primary" style="float: left; margin-right: 5px;"></div>
<a data-toggle="collapse" data-parent="#accordion1" href="#{{getID(item)}}">
<span class="panel-title" ng-bind="item.resourceCode"></span>
</a>
</div>
<div id="{{getID(item)}}" class="panel-collapse collapse" ng-class="{'in': isActiveSection(item)}">
<table class="table">
<thead>
<th class="col-sm-6">Name</th>
<th class="col-sm-2 text-center">Read</th>
<th class="col-sm-2 text-center">ReadWrite</th>
<th class="col-sm-2 text-center">None</th>
</thead>
<tr ng-repeat="subitem in item.subPrivilegeModels | orderBy: 'resourceCode'">
<td class="col-sm-6"><span ng-bind="subitem.resourceCode"></span></td>
<td class="col-sm-2 text-center">
<input type="radio" name="access_{{$parent.$index}}_{{$index}}" ng-model="subitem.access" ng-value="'READ'"/>
</td>
<td class="col-sm-2 text-center">
<input type="radio" name="access_{{$parent.$index}}_{{$index}}" ng-model="subitem.access" ng-value="'READWRITE'"/>
</td>
<td class="col-sm-2 text-center">
<input type="radio" name="access_{{$parent.$index}}_{{$index}}" ng-model="subitem.access" ng-value="'NONE'"/>
</td>
</tr>
<tbody>
</table>
</div>
</div>
</div>
not to worry...managed to solve it using a form element between the sections and changed the naming of the radiobuttons
<body ng-controller="Channels" class="container-fluid">
<div class="panel-group" id="accordion1" ng-if="sections!==null">
<div class="panel panel-default" ng-repeat="item in sections | orderBy: 'resourceCode'">
<div class="panel-heading">
<div class="glyphicon glyphicon-plus-sign text-primary" style="float: left; margin-right: 5px;"></div>
<a data-toggle="collapse" data-parent="#accordion1" href="#{{getID(item)}}">
<span class="panel-title" ng-bind="item.resourceCode"></span>
</a>
</div>
<div id="{{getID(item)}}" class="panel-collapse collapse" ng-class="{'in': isActiveSection(item)}">
<form>
<table class="table">
<thead>
<th class="col-sm-6">Name</th>
<th class="col-sm-2 text-center">Read</th>
<th class="col-sm-2 text-center">ReadWrite</th>
<th class="col-sm-2 text-center">None</th>
</thead>
<tr ng-repeat="subitem in item.subPrivilegeModels | orderBy: 'resourceCode'">
<td class="col-sm-6"><span ng-bind="subitem.resourceCode"></span></td>
<td class="col-sm-2 text-center">
<input type="radio" name="access_{{$index}}" ng-model="subitem.access" ng-value="'READ'"/>
</td>
<td class="col-sm-2 text-center">
<input type="radio" name="access_{{$index}}" ng-model="subitem.access" ng-value="'READWRITE'"/>
</td>
<td class="col-sm-2 text-center">
<input type="radio" name="access_{{$index}}" ng-model="subitem.access" ng-value="'NONE'"/>
</td>
</tr>
<tbody>
</table>
</form>
</div>
</div>
</div>
Related
I have created a repeating partial view , now i want to delete the dynamically created.
This is my Main View my-custom-row-template is the partial that will be injected repeatedly onclick.
<section class="main_container">
<div class="container">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<form ng-submit="addNew()">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()"/></th>
<th scope="col">Setup Responses</th>
<th>Add Condition</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personalDetail in personalDetails">
<td scope="col">
<input type="checkbox" ng-model="personalDetail.selected"/>
</td>
<td scope="col" class="col-xs-10">
<!--<div ng-repeat="condition_set in conditions" my-custom-row-template> </div>-->
<div ng-repeat="condition_set in conditions track by $index"
my-custom-row-template></div>
<!--<div my-custom-row-template></div>-->
</td>
</td>
<td scope="col">
<input type="button" value="Add Condition" ng-click="addCondition()"
class="btn btn-primary addnew"/>
</td>
</tr>
</tbody>
</table>
<div class="form-group">
<input ng-hide="!personalDetails.length" type="button"
class="btn btn-danger pull-right"
ng-click="remove()" value="Remove">
<input type="submit" class="btn btn-primary addnew pull-right" value="Add New">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</span>
And this is my Partial view
<div class="col-xs-8 pull-left">
<div class="row form-group">
<select style="color: black;">
<option>Response Message</option>
<option>IF</option>
<option>Else</option>
</select>
<input type="text" class="form-control" ng-model="personalDetail.message"/>
<select style="color: black;">
<option>Step 2</option>
</select>
<select style="color: black;">
<option>Add Step</option>
</select>
<input type="button" value="Remove Condition" ng-click="remove_condition(my-custom-row-template)"
class="btn btn-danger"/>
</div>
</div>
This is how i am trying to get the current element and remove it, but i am getting a 0 instead. how to remove the currently clicked Partial ?
$scope.remove_condition = function (element) {
console.log(element);
};
Can any 1 tell me on how to remove the current partial view.
I have the following code structure where inside a modal-popup, I've populated rows of a table using ng-repeat. Now I want to pass the values of 3 columns of all the rows to the controller but I dont know how exactly I would be able to use the data outside ng-repeat scope and pass to the controller. Here's my code snippet -
<div class="inmodal">
<div class="modal-header" ng-model="modalDetails">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="cancel()">×</button>
<img ng-src={{$root.varImg}} class="m-b-md" alt="profile">
<h4 class="modal-title">{{$root.assetGrpNm}}</h4>
</div>
<div class="modal-body" >
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-12">
<div class="table-responsive">
<div ng-repeat="dataag in detail.outerData" >
<table class="table table-striped table-bordered table-hover">
<thead>
<!-- --------- I tried using this piece of code thinking that atleast the values would be inside ng-repeat scope
<tr><button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="save(deviceId,dataDeviceData.measurementData,newDeviceValue,dataDeviceData.lastReadingDateTime)">Save</button></tr>
-->
<tr>
<th>Id</th>
<th>Name</th>
<th>Last Value</th>
<th>Current Value</th>
<th>Date Time</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="dataDevice in dataag.innerData track by $index">
<td>
<span style="font-weight: 800;"><span ng-model="deviceId">{{dataDevice.managedDeviceInfo.id}}</span> - {{dataDevice.managedDeviceInfo.deviceExternalId}}</span>
</td>
<td ng-repeat="dataDeviceData in dataDevice.deviceCoreData">{{dataDevice.managedDeviceInfo.deviceName }} - <span class="text-center">({{ dataDeviceData.quantityUnitSymbol }})</span></td>
<td ng-repeat="dataDeviceData in dataDevice.deviceCoreData">
<input type="number" class="form-control" id="modal_val" ng-model="dataDeviceData.measurementData" required style="width: 100px;"></td>
<td ng-repeat="dataDeviceData in dataDevice.deviceCoreData">
<input type="number" class="form-control" id="modal_val" ng-model="newDeviceValue" required style="width: 100px;"></td>
<td style="position: relative;">
<div id="datetimepicker1-{{$index}}" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text" ng-model="dataDeviceData.lastReadingDateTime"></input>
<span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="save(deviceId,dataDeviceData.measurementData,newDeviceValue,dataDeviceData.lastReadingDateTime)">Save</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="ok()">Cancel</button>
</div>
</div>
Below is an image showing the logic -
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>
I am trying to use infinite scroll in a angular UI modal and the modal is defined in ng-template as shown below
<script type="text/ng-template" id="someID" >
<div infinite-scroll="loadMoreEmployees()" infinite-scroll-distance="1">
<div class="modal-header">
<div class="vertical-margin row">
<div class="col-lg-12">
<h2 class="help-block">Departments assign</h2>
</div>
</div>
</div>
<div class="modal-body">
<div class="content-container">
<div class="col-lg-12 col-md-12 simple-data-table-content">
<table data-ng-if="vm.employees!=null || vm.employees.length!=0" class="table table-condensed text-center clear-bottom">
<tbody>
<tr>
<th>Employee No</th>
<th>Employee Name</th>
<th>Email</th>
<th data-ng-repeat="DeptType in vm.DeptTypes track by $index">{{DeptType.name}}</th>
<th></th>
</tr>
<tr data-ng-if="vm.employees==null || vm.employees.length==0"><td colspan="{{vm.DeptTypes.length + 4}}"></td></tr>
<tr data-ng-repeat="employee in vm.employees | limitTo:vm.loadEmployeeLimitCount" data-ng-if="vm.employees!=null && vm.employees.length > 0">
<td class="">{{employee.employeeNumber}}</td>
<td class="">{{employee.name}}</td>
<td class="">{{employee.email}}</td>
<td class="" data-ng-repeat="DeptType in vm.DeptTypes">
<input type="text" only-digits data-ng-model="employee.DeptSummary[DeptType.id]" style="width:50px;" min="1" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
But infinite scroll as does not respond to scroll action, please point out where I am wrong.