My question Related to this Question at ng-repeat values with 3 columns in table? - AngularJS
Then my Question is How to Get the Value of that button on click. ?
Here is My Problem
<input type='text' ng-model="mydata" />
<span ng-bind="$parent.$eval(mydata)"></span>
$scope.buttons =[ [0,1,2,3,4],
[5,6,7,8,9]
];
<tr ng-repeat="row in buttons">
<td ng-repeat= "button in row"><button class="btn btn-primary" ng-click ="$parent.mydata = $parent.mydata.toString() + button">
{{button}}</button></td>
</tr>
It Works on a single Array. But in multiple it doesn't
You can try something like this.
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="value in array">
<button ng-click=myFunction(value,$index)> MyButton</button>
</div>
</body>
app.controller('myCtrl', function ($scope) {
$scope.myFunction = function(val,index) {
console.log(val) };
});
//assuming this is your array
$scope.data = [
["opt1", "opt2", "opt3"],
["opt1", "opt2", "opt3"],
["opt1", "opt2", "opt3"]
];
// using ng-repeat to show all data
<table>
<tr ng-repeat="row in data">
<td ng-repeat="column in row" ng-click="somefunction('{{column}}')">{{column}}</td>
</tr>
</table>
THEN PASS IT TO THE CONTROLLER AND GET THE VALUE THERE..
Related
I am using ng-repeat to loop though elements which could be numeric or object. I am trying to use condition to display number or another sub ng-repeat. Following an example of code
<tr ng-repeat="(key,val) in vm.data">
<td>{{key}}</td>
<td ng-repeat="y in val">
<span ng-if="angular.isNumber(y)">{{y}}</span>
<table>
<tr ng-repeat="(a,b) in y"><td>{{a}}</td><td>{{b}}</td></tr>
</table>
</td>
</tr>
I am very new to angular. Please help.
Try like the below code, also please check this plunker for working example.
Controller:
$scope.isNumber = angular.isNumber;
Template:
<span ng-if="isNumber(value)">Valid Number</span>
Bind the angular.isNumber function to a function in your controller.
var app = angular.module("App", []);
app.controller("vmCtrl", function () {
var vm = this;
vm.isNumber = angular.isNumber;
vm.data = {
"thing1": [1,2,3,4],
"thing2": [{
"something1a": "something1b",
"something2a": "something2b"
},
{
"somethingElse1a": "somethingElse1b",
"somethingElse2a": "somethingElse2b"
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<table ng-app="App" ng-controller="vmCtrl as vm">
<tr ng-repeat="(key,val) in vm.data">
<td>{{key}}</td>
<td ng-repeat="y in val">
<span ng-if="vm.isNumber(y)">{{y}}</span>
<table>
<tr ng-repeat="(a,b) in y"><td>{{a}}</td><td>{{b}}</td></tr>
</table>
</td>
</tr>
</table>
I'm generating a table of values using ng-repeat and have a text box I'm using to filter that list. That's working fine.
I also have a small "x" image after the text box where the user can click to remove the text they typed for filtering. When they click the "x", I want to clear the text box and restore the full list of items, unfiltered. Clicking the "x" clears the text box, but the list then disappears completely, rather than being restored to its full, unfiltered state. What's the trick? Here's my code:
<table id="tblGroups">
<tr>
<td>
<input ng-model="f.Name" />
<img class="DeleteSavedSearchIcon" src="Content/assets/DeleteIconSmall.png" ng-click="f.Name = null" />
</td>
</tr>
<tr ng-repeat="g in groups | filter:f">
<td>
<label><input type="checkbox" id="{{g.Name}}" ng-click="onClickSearchCriteriaCheckbox()" ng-model="selected[m.Name]" />{{g.Name}}</label>
</td>
</tr>
</table>
Instead of setting f.name to null set it to a blank string like so.
Before:
<a href=""><img class="DeleteSavedSearchIcon" src="Content/assets/DeleteIconSmall.png" alt="delete"
ng-click="f.Name = null" /></a>
After:
<a href=""><img class="DeleteSavedSearchIcon" src="Content/assets/DeleteIconSmall.png" alt="delete"
ng-click="f.Name = ''" /></a>
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
$scope.groups = [{
Name: 1
}, {
Name: 2
}, {
Name: 3
}, {
Name: 4
}, {
Name: 5
}, {
Name: 6
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<table id="tblGroups">
<tr>
<td>
<input ng-model="f.Name" />
<img class="DeleteSavedSearchIcon" src="Content/assets/DeleteIconSmall.png" alt="delete" ng-click="f.Name = ''" />
</td>
</tr>
<tr ng-repeat="g in groups | filter:f">
<td>
<label>
<input type="checkbox" id="{{g.Name}}" ng-click="onClickSearchCriteriaCheckbox()" ng-model="selected[m.Name]" />{{g.Name}}</label>
</td>
</tr>
</table>
</div>
Try
ng-click="f.Name = undefined"
see example in plunker https://plnkr.co/edit/TpESoPYENhYQoWuNrIFT?p=preview
I have a list of images saved in var images, and a list of names saved in var searchName, now I need to display images along with name, but I could display it after all images displayed only.
HTML:
<div class="row col-sm-12" >
<table class="displayImg col-sm-3">
<tr ng-repeat = "image in images">
<td><img ng-src="{{image}}" class="imageShow"/> </td>
</tr>
<tr ng-repeat = "item in searchName">
<td>{{item[0].profileInfo.firstname}} </td>
</tr>
</table>
</div>
How about merge this two into single Array and use ng-repeat.
var app = angular.module("app", []);
app.controller("controller", function($scope) {
$scope.images = ['https://angularjs.org/img/AngularJS-large.png', 'http://build.acl.com/assets/tech-logos/angular-03fcc4cfc89d9b310265e7d1e01ee0aef405abf6c632f59342b18848e1c02587.svg'];
$scope.searchName = ["Angular-Logo", "Angular-SVG-Image"];
$scope.intrArr = mapImageAndName();
function mapImageAndName() {
var mappedArr = [];
for (var i = 0; i < $scope.images.length; i++) {
mappedArr.push({
'image': $scope.images[i],
'name': $scope.searchName[i]
});
}
return mappedArr;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="row col-sm-12" ng-app="app" ng-controller="controller">
<table class="displayImg col-sm-3">
<tr ng-repeat="obj in intrArr">
<td>
<img ng-src="{{obj.image}}" class="imageShow" />
</td>
<td>
{{obj.name}}
</td>
</tr>
</table>
</div>
You could use nested ng-repeat.
<div class="row col-sm-12" >
<table class="displayImg col-sm-3">
<tr ng-repeat = "image in images">
<td><img ng-src="{{image}}" class="imageShow"/> </td>
<td ng-repeat = "item in searchName">
{{item[0].profileInfo.firstname}} </td>
</tr>
</table>
</div>
Look into AngularJS ng-repeat document.
There is a term called ng-repeat-start and ng-repeat-end
AngularJS ng-repeat Document
<tr ng-repeat = "image in images">
<td><img ng-src="{{image}}" class="imageShow"/> </td>
<td>{{searchName[$index][0].profileInfo.firstname}} </td>
</tr>
I want to show message when ng-repeat collection is empty i.e.:
<div ng-init="filteredArray=(array|filter:{...})">
<h1 ng-if="!filteredArray.length">Empty array</h1>
<table ng-if="filteredArray.length">
<tr ng-repeat="element in filteredArray">
<td>{{element}}</td>
</tr>
</table>
</div>
The problem is that ng-init will not watch for modification of the source array. Any hint how to do it properly?
You can just create the filtered variable in the ng-repeat, and use that one:
<div>
<h1 ng-if="!filteredArray.length">Empty array</h1>
<table ng-if="filteredArray.length">
<!-- here angular assigns the filtered array to the 'filteredArray' variable,
which then can be used -->
<tr ng-repeat="element in filteredArray=(array|filter:{...})">
<td>{{element}}</td>
</tr>
</table>
</div>
See also this jsfiddle
EDIT
If you don't like the ugly expression, you can also do something like this:
function myController ($scope, $filter) {
$scope.$watch("theFilter", function (val) {
$scope.filteredArray = $filter("filter")($scope.array, val);
});
}
And in your html:
<tr ng-repeat="element in filteredArray">
..
</tr>
Check in this jsfiddle
Check ng-repeats $last to show your message like below
<div ng-repeat="n in data track by $index">
<h1 ng-if="$last">Empty array</h1>
</div>
In your case you can have a variable at the table level and then set it to $last,when it'll be true your message will show like below
<body ng-app="app" ng-controller="ctrl">
<div ng-init='counter=false'>
<h1 ng-if='counter'>Empty array</h1>
<table ng-if="myData.length">
<tbody>
<tr ng-repeat="element in myData track by $index" ng-init="counter=$last">
<td>{{element}}
<ng-if ng-init='sync($last)'/>
</td>
</tr>
</tbody>
</table>
</div>
</body>
Your controller should look like below
var app=angular.module('app',[])
app.controller('ctrl',function($scope){
$scope.myData=['a','b','c']
$scope.sync=function(val)
{
alert(val)
$scope.counter=val
}
})
Since you have stored (array|filter:{...}) value into filteredArray, you cannot modify it in the template.
You should repeat (array|filter:{...}) code in the template.
<h1 ng-if="!(array|filter:{...}).length">Empty array</h1>
<table ng-if="(array|filter:{...}).length">
<tr ng-repeat="element in (array|filter:{...})">
<td>{{element}}</td>
</tr>
</table>
var app = angular.module("myapp", ["ngSanitize"]);
app.controller("controller", ['$scope', function($scope) {
$scope.tasks = [{
item: "Shopping",
status: true
}, {
item: "Cleaning",
status: false
}];
}]);
and html
<div ng-app="myapp">
<div ng-controller='controller'>
<table border=1 ng-repeat='task in tasks'>
<tr>
<td>{{task.item}}</td>
<td>{{task.status}}</td>
</tr>
</table>
</div>
</div>
I tried as above but i could not able to attach header to the table.And at the place of Done I am tring to attach a checkbox...I mean if status is true the chexk box must be checked or else unchecked.
Output:
Item Done
Shopping checkbox with ticked
Cleaning checkbox without ticked
See documentation for checkbox input
Not exactly the answer, but why do you repeat table instead of rows?
<div ng-app="myapp">
<div ng-controller='controller'>
<table border=1 >
<tr>
<th>Name</th>
<th>Status</th>
</tr>
<tr ng-repeat='task in tasks'>
<td>{{task.item}}</td>
<td><input type="checkbox" ng-model="task.status"></td>
</tr>
</table>
</div>
</div>
But I don't see any sense in table in your case.
<span ng-repeat="task in tasks">
<input type="checkbox" ng-model="task.status"> {{task.item}}
</span>
That would be much cleaner.
Do changes as follows in the HTML.
<body ng-app="myapp" ng-controller="ListController">
<table border="1" ng-repeat='task in tasks'>
<tr>
<td>
{{task.item}}
</td>
<td>
<input type="checkbox" ng-model="task.status">
</td>
</tr>
</table>
</body>
Do changes in the Angular js as follows.
var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
$scope.tasks = [{
item: "Shopping",
status: true
}, {
item: "Cleaning",
status: false
}];
}]);