I am trying to use ng-show="emp" with a checkbox bind it with ng-model inside a list but it is not working properly. Do you have any idea how it works?
HTML
<fieldset id="field4">
<table>
<tr>
<td><input type="checkbox" ng-model="all" ng-click="selectall(all)" ng-disabled="self" /><label>Select All</label> </td>
<!--<td><input type="checkbox" ng-model="clear" ng-click="clearall(clear)" ng-disabled="self" /> Clear all</td>-->
<td><input type="checkbox" ng-model="self" ng-show="emp" /><label ng-show="emp">Self Service</label> </td>
</tr>
</table>
</fieldset>
<br />
<div class="wrapper">
<fieldset id="field2">
<table>
<tr ng-repeat="e in empdepts | filter : dept | filter : code | filter : emp | groupBy:'dep_LDesc' ">
<td>
<label ng-click="showContent = !showContent"></label>
<details ng-open="showContent">
<summary>{{e[0].dep_LDesc}}</summary>
<ul ng-repeat="employee in e ">
<li ng-model="emp" ng-class="{'selected1':employee == selectedRow1}" ng-click="setClickedRow1(employee)"> {{employee.Sname}}</li>
</ul>
</details>
</td>
</tr>
</table>
</fieldset>
If the ng-model of the checkbox is binded to the scope variable "all" (ng-model="all"), why don't you do this?
<input type="checkbox" ng-model="self" ng-show="all" />
On the other hand, when something like this doesn't work, use a label/span to render the actual value of the variable you are using so you can easily see the actual value.
Related
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>
Here why span is not showing binding values.Here my intenssion is my span has to work as label
<div ng-controller="MydrpCntrl">
<form>
<select class="form-control" ng-options="I.EmployeeId as I.EmployeeId for I in EmployeeList" ng-model="EmployeeId" ng-change="GetEmployees()">
<option value="">Select Employee Id</option>
</select>
<span ng-repeat="eee in Emp"> </span>
<br /><br />
<table class="table" style="margin-left:20px">
<tr>
<th style="cursor:pointer"<b>Employee Name</b></th>
</tr>
<tr ng-repeat="eee in Emp">
<td>
{{eee.EmployeeeName}}
</td>
</tr>
</table> </form>
</div>
Try this:
<span ng-repeat="eee in Emp">{{eee.Name}} </span>
I want to make validations on table rows , I am doing in the following way but its not working.
I want to apply it on click of save button at lst.
I have 5 columns and want to apply validation for each column Suppose if any field is empty I want to disable the button.
Can anybody help?
<div class="mainDiv" ng-if="currentForm != ''">
<table class="mappingTable">
<tr>
<th>#</th>
<th>CommCare Question</th>
<th>Data Element</th>
<th>Category Option Combo</th>
<th>Frequency/Period</th>
<th>Facility Identifier</th>
</tr>
<tr ng-repeat="mappingElement in formIdMetadataMappingToObjectMap[currentForm.unique_id].mappingElements">
<td class="serialNoCell">{{$index+1}}.</td>
<td title="{{mappingElement.commcareQuestion}}" class="commcareQuestion">{{mappingElement.commcareQuestionDescription}}</td>
<td class="dhisDe"> <input type="text"
name="foo"
class="form-control"
ng-model="mappingElement.dataElement"
ng-class="{ error: !mappingElement.dataElement }"
placeholder="{{'please_select_data_element'}}"
uib-typeahead="dataElement as dataElement.name for dataElement in dataElements | filter:$viewValue | limitTo:20"
uib-typeahead-focus-first="false"
uib-typeahead-editable=false
ng-blur="updateCategoryCombo(this.mappingElement)"
/></td>
<td class="dhisCC"><input type="text"
name="foo"
class="form-control"
ng-model="mappingElement.categoryCombo"
ng-class="{ error: !mappingElement.categoryCombo }"
placeholder="{{'please_select_categorycombo'}}"
uib-typeahead="categoryComboOption as categoryComboOption.name for categoryComboOption in categoryComboInputHolder[currentForm.unique_id+mappingElement.commcareQuestion] | filter:$viewValue "
uib-typeahead-focus-first="false"
uib-typeahead-editable=false
/></td>
<td class="dhisPeriod"><input type="text"
name="foo"
class="form-control"
ng-model="mappingElement.period"
ng-class="{ error: !mappingElement.period }"
placeholder="{{'please_select_period'}}"
uib-typeahead="period as period.name for period in periods | filter:$viewValue | limitTo:20"
uib-typeahead-focus-first="false"
uib-typeahead-editable=false
/></td>
<td class="dhisOuIdentifier"><input type="checkbox" ng-model="commcareQuestionToOrgUnitIdentifierMap[currentForm.unique_id+mappingElement.commcareQuestion]" ng-click="doOrgUnitUIOperations(this);" ng-disabled="!commcareQuestionToOrgUnitIdentifierMap[currentForm.unique_id+mappingElement.commcareQuestion]&&formIdToIsOrgUnitIdentifierPresentMap[currentForm.unique_id]"></td>
</tr>
</table>
<div>
<button type="button" ng-disabled="!mappingElement.categoryCombo || !mappingElement.dataElement || !mappingElement.period" ng-click="saveMetadataMapping()">{{'Save'}}</button>
</div>
</div>
One thing that could be wrong here is that the button is outside of the ng-repeat's scope. So it doesn't know about mappingElement.
If you want validation on each row separately add the button inside a column,
otherwise you can create a function in the controller to iterate the formIdMetadataMappingToObjectMap[currentForm.unique_id].mappingElements collection and search for empty values, then you can simply add it to the button ng-disabled="validationFunc()".
I have the following sample model:
{
a:{
x:0,
z:0,
f:1
},
b:{
x:"a",
u:"b"
}
}
Which I render into two different tables
<div class="col-sm-5">
<h1>A</h1>
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="(key,value) in schema.a">
<td>
<input type="text" ng-model="key" required>
</td>
<td>
<input type="text" ng-model="value" required>
</td>
<td></td>
</tr>
</table>
</div>
<div class="col-sm-5 col-md-offset-2">
<h1>B</h1>
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="(key,value) in schema.b">
<td>
<input type="text" ng-model="key" required>
</td>
<td>
<input type="text" ng-model="value" required>
</td>
<td></td>
</tr>
</table>
</div>
The tables are dynamic, which means I can add new rows to it.
Now when I change any values inside the table, they aren´t synchronized with the model -> Editing not possible
What do I need to do to store changes automatically in the original
model?
If this is not possible, how can I get a Json Schema from my table
like the one the tables are rendered from, so that I only have to
overwrite the old one?
First off you can't dynamically change an object property name or key. So what you are trying to do with ng-model="key" simply won't work.
As far as the value part you should be using the object reference in your ng-model
<tr ng-repeat="(key,value) in schema.b">
<td>{{key}}</td>
<td>
<input type="text" ng-model="schema.b[key]" required>
</td>
<td></td>
</tr>
if you need to be able to edit the key then you need to change your data structure to an array of objects with each object having the same property names for keys
I have just looked for the same problem but I didn't find a solution. I tried some solutions and examples but nothing worked.
I have this HTML code in AngularJS:
<h2 class="text-center text-thin">{{pageTitle}}</h2>
<input type="text" ng-model="searchText" placeholder="Search" class="center-block" />
<div>
<br>
</div>
<div class="list col-xs-12">
<table class="tbl-catalogo">
<tr class="even">
<td>Article</td>
<td>Family</td>
<td>Ice Type</td>
<td>Cooler</td>
</tr>
<tr ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat="prod in list | filter:searchText" ng-click="_dettaglio3(prod);">
<td>{{prod.id_a}}</td>
<td>{{prod.id_f}}</td>
<td>{{prod.forma}}</td>
<td>{{prod.tipo_raff}}</td>
</tr>
</table>
</div>
And in my controller I have this function:
$scope._dettaglio3 = function (val) {
alert(JSON.stringify(val));
console.log("\n\n\n\n\n\n" + JSON.stringify(val) + "\n\n\n\n\n\n");
};
Problem: When I click in the tr the first time it's correct, when I click a second time the element passed is the first, if I click another time the element passed is correct. How i can fix this problem?