I'm using ngTable directive as my grid.So I need to capture the row's text box value change without using any button (Please see the image below).How can I use $watch or other method to do that ? Any help would be highly appreciated.
html
<table class="table" ng-table="UnitsParams" template-pagination="custom/pager">
<tr ng-repeat="item in Event.UnitsDetails">
<td data-title="'Name'" sortable="'FirstName'">{{item.FirstName}} {{item.LastName}}</td>
<td data-title="'Email'">{{item.Email}}</td>
<td data-title="'Units'"><input type="number" ng-model="item.Units" />
</td>
</tr>
</table>
Try ng-blur in your textbox
Something like
<td data-title="'Units'"><input type="number" ng-blur="getValue(item)" ng-model="item.Units" /></td>
javascript code looks like in your controller
$scope.getValue=function(item)
{
alert(item.Units)
}
Related
myCtrl.Data.summary.account
if i print above model i get the output like below
["1","2","3","4","5"]
i want to use ng-repeat on this value, how to achive this?
I tried following code snippet using ng-repeat but it's not printing anything
<td ng-repeat="data in myCtrl.Data.summary.account">
<tr>{{data}}</tr>
</td>
What mistake i made here? can anyone please point out this issue. How to fix this?
it is ng-repeat not ng-repet
<td ng-repeat="data in myCtrl.Data.summary.account">
<tr>{{data}}</tr>
</td>
1) Use ng-repeat instead of ng-repet
2) If you are using controllerAs syntax check if myCtrl is correct controller name in controllerAs value
3) If you are using $scope then you should create $scope.myCtrl.Data.summary.account in controller
You should place the value in the columns and repeat for the rows. Your code should be in this format:
<tr ng-repeat="data in myCtrl.Data.summary.account">
<td>{{data}}</td>
</tr>
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.arr = ["1","2","3","4","5"]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table>
<tr>
<td ng-repeat="data in arr">
<table>
<tr>
<td >{{data}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
cant use directly <tr>inside <td> . you need to create a table and add it there
<td ng-repeat="data in myCtrl.Data.summary.account">
<table>
<tr>
<td>{{data}}
</td>
</tr>
</table>
</td>
I have a html table which is binding using Angularjs.Now i want to select checkbox during ng-repeat with a condition.
<tbody>
<tr class="gradeX" ng-repeat="itm in usersList">
<td>
<input type="checkbox"/></td>
<td> {{itm.FirstName}}</td>
<td>{{itm.Email}}</td>
</tr>
</tbody>
I have another field itm.checkstatus.i want to check the checkbox during ng-repeat when itm.checkstatus=1 then checkbox will check else checkbox will not check.how to do this?
You can use ng-checked for this:
https://docs.angularjs.org/api/ng/directive/ngChecked
<tbody>
<tr class="gradeX" ng-repeat="itm in usersList">
<td><input type="checkbox" ng-checked="itm.checkstatus == 1" /></td>
<td>{{itm.FirstName}}</td>
<td>{{itm.Email}}</td>
</tr>
</tbody>
I am new in angular js , just Need to find error items for each row.How to do that.I am adding the row by using add1() function.It should be calculated for each row.
inputs: nobot(ng-model),err.bot(ng-model) for each row.
output: err.eper(ng-model) for each row.
<td><input type="text" ng-model="nobot" name="nobot"></td>
<tr ng-repeat="err in error.items">
<td><input type="text" ng-model="err.bot" id="b1" name="r5[]" ></td>
<td><input type="text" ng-model="err.eper" id="b2" name="r6[]" ng-value="d4()"></td>
<td <a href ng-click="remove1(item)">X</a></td>
</tr>
<tr>
<td><a href ng-click="add1()">+</a></td>
</tr>
Please help me out.Please let me know if any problems to understand the Question.
I have a HTML table and in several rows I have a Material Design button in each cell, dynamically generated using AngularJS.
<table class="plans">
<tbody>
<tr>
<td>Work Plans</td>
<td ng-click="pbmainController.selectPlan(plan.planName)"
ng-repeat="plan in pbmainController.planList">
<md-button class="md-raised">{{plan.planName}}</md-button>
</td>
</tr>
</tbody>
</table>
Only one of button can be selected at a time (i.e. like a radio button).
How do I change the color of the selected button?
I got it to work by putting the ng-class on the button, using the ternary operator
<table class="plans">
<tbody>
<tr>
<td>Work Plans</td>
<td ng-click="pbmainController.selectPlan(plan.planName)"
ng-repeat="plan in pbmainController.planList">
<md-button ng-class="plan.planName == selectedPlanName ? 'md-raised md-primary' : 'md-raised'">{{plan.planName}}</md-button>
</td>
</tr>
</tbody>
</table>
A ng-class attribute will do the trick.
In your function selectPlan you probably save the name somewhere. Assuming this var is named selectedPlan, you can do something like this :
<table class="plans">
<tbody>
<tr>
<td>Work Plans</td>
<td ng-click="pbmainController.selectPlan(plan.planName)"
ng-repeat="plan in pbmainController.planList">
<md-button ng-class="{'active' : plan.planName == selectedPlan}" class="md-raised">{{plan.planName}}</md-button>
</td>
</tr>
</tbody>
</table>
ng-class will be apply your class (here active) only when the condition is true. So only when your plan is the selected one.
I'm not sure how to do this in angular, after coming from jquery.
I have a table:
<div class="col-xs-10">
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</thead>
<tbody ng-repeat="val in data">
<tr>
<td>val.Time</td>
<td>val.Distance</td>
<td ng-click="callmethod()"><img src="delete"></td>
</tr>
</tbody>
</table>
</div>
Essentially I want the callmethod() to know which row is being clicked so that I can make a update in the model in my controller. What is the right way to do this?
You can use the $index property:
callmethod($index)
Then on your controller you would do something like:
function callmethod(index) {
var foo = $scope.data[index];
}
Change that ng-click to this:
<td ng-click="callmethod(val)"><img src="delete"></td>
You'll get the whole val object when that method gets called.