I have the following html template:
<div ng-app ng-controller="Ctrl">
<div class="cont">
<table>
<tr><th ng-repeat="column in columns">{{column}}</th></tr>
<tr ng-repeat="(i, row) in people">
<td ng-repeat="(j, column) in columns">
<input type="radio" name="select" ng-if="column === 'id'">
<span>{{row[column]}}</span>
</td>
</tr>
</table>
</div>
</div>
Then I define my Ctrl as follow
function Ctrl($scope) {
$scope.selectedId = 'aaaaa';
$scope.columns = ['id','name', 'age'];
$scope.people=[
{
'id':'aaaaa', 'name':'rachit', 'age':11
},
{
'id':'bbbbb', 'name':'gulati', 'age':12
},
{
'id':'ccccc', 'name':'rocks', 'age': 13
}
]
}
https://jsfiddle.net/en91zuxb/
it's showing radio input for all the item, while my intention is to only show the radio button on the first column, because the 1st column is the id column... ...
It seems that your angular version is old, this was an error related to angularjs < 1.2. Try upgrading your angularjs version or use ng-show instead.
Following code worked for me.
<input type="radio" name="select" ng-show="column == 'id' ">
Related
Please click on the demo below
www.jsfiddle.net/rnnb32rm/1370
My problem is: "Add input" is working fine. But whenever i invoke "Add
Fields", the subsequent field will be sync with the first one. I want
the subsequent to be filled with only one input. Stuck for hours already. Please guide!
Picture to illustrate:
May be help you.
var app = angular.module("app",[]);
app.controller("MyCtrl" , function($scope){
$scope.data ={
items:[{ name:"",family:"",age:""}]
};
$scope.addRow = function(index){
var item = { name:"",family:"",age:""};
if($scope.data.items.length <= index+1){
$scope.data.items.splice(index+1,0,item);
}
};
$scope.deleteRow = function($event,item){
var index = $scope.data.items.indexOf(item);
if($event.which == 1)
$scope.data.items.splice(index,1);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<table>
<tr ng-repeat="name in data.items track by $index">
<td> <input type="text" ng-model="data.items[$index].name"></td>
<td> <input type="text" ng-model="data.items[$index].family"></td>
<td> <input type="text" ng-model="data.items[$index].age"></td>
<td> <input type="button" ng-click="addRow($index)" value="Add" ng-show="$last"></td>
<td> <input type="button" ng-click="deleteRow($event,name)" value="Delete" ng-show="$index != 0"></td>
</tr>
</table>
<span>{{data|json}}</span>
</div>
I answered this the first time you posted this question, but you deleted it.
You only have one choices array, and you are using it over and over:
$scope.addNewChoice = function() {
// ...
// Same array each time
$scope.choices.push({'id':'choice'+newItemNo});
};
<fieldset data-ng-repeat="choice in choices2">
<div data-ng-repeat="choice in choices "> <!-- Same array each time -->
You probably want one array for each entry in the choices2 array.
Also, both of your ng-repeat elements use the same variable name (choice) which is confusing.
I have the next html form (with a input field disabled for default, called unitCreator):
<div class="form-group col-xs-12 col-md-12">
<label for="unitcreator" class="control-label unit-creator">Org. Unit Creator</label>
<input type="text" class="form-control unit-creator" id="unit-creator" name="unit-creator" ng-model="unitCreator" ng-disabled="!unitCreator" />
<a data-toggle="modal" data-target="#myModal"><img src="/WebOpportunities/static/img/ico_search.png" class="search" /></a>
</div>
The icon opens a window modal, with a html table, when i click about a row, i wish input field unitCreator enabled, to pass the column value.
This is my table code html in modal bootstrap:
<div class="modal-body">
<table class="table table-hover">
<thead>
<tr>
<th>Branch</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="organizational in organizationals" ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index)">
<td>{{organizational.branch}}</td>
<td>{{organizational.name}}</td>
</tr>
</tbody>
</table>
</div>
This is my code js:
$scope.managers = [
{name: 'Ana Faedo Iglesias'},
{name: 'Cristina Menendez'},
{name: 'Daniel Piriz'}
];
$scope.selectedRow = null;
$scope.setClickedRow = function(index){
$scope.selectedRow = index;
}
$scope.createSelectRowClick = function(){
if ($scope.selectedRow==null)
{
alert("Any rows selected");
}
else
{
//here, i enabled the unitCreator field input and i put the column value of the table inside input field unitCreator
$scope.unitCreator = false; //this not working
//alert("hola" + $scope.selectedRow);
//alert("valuetd " + $scope.organizationals[$scope.selectedRow].name)
}
}
I base in this example to select the table row: http://code.ciphertrick.com/2014/12/06/highlight-a-selected-row-in-ng-repeat-using-ng-class/ Demo: http://code.ciphertrick.com/demo/ngClass/
The column value, i get it so (but i dont know how pass it, to modal window to unitCreator input field):
$scope.organizationals[$scope.selectedRow].name
How could do it? thanks,
Instead of passing the index, just pass the object. They you don't have to worry about deferencing from the array
<tr ng-repeat="organizational in organizationals" ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow(organizational)">
and
$scope.setClickedRow = function(organization){
$scope.selectedOrganization = organization;
}
I have a table that has a list from database with checkbox on each row, checkbox will used for ex. during deletion of the record.
So what i am trying to achieve is that when i clicked the delete button, angular will loop each row in table and check the checkbox whether is checked, if yes the please proceed to delete. Dont have any idea how to do this. Someone please give some related example.
Here is my code
index.html
<button class="ui red labeled icon button right floated" type="button" data-content="Delete selected item(s)" id="delete" ng-click="deleteSeleted()"><i class="trash icon"></i>Delete</button>
<div class='container-table'>
<table class="ui fixed single line celled table striped sortable compact" style="width:2000px" id="mytable">
<thead>
<tr>
<th class="width-checkbox"><input type="checkbox" ng-model="matin.selectedAll" /></th>
<th class="width-120">Item</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in data">
<td><input type="checkbox" ng-checked="matin.selectedAll"></td>
<td>{{x.item}}</td>
</tr>
</tbody>
</table>
</div>
<tr ng-repeat="x in data">
<td><input type="checkbox" ng-model="x.selected"></td>
<td>{{x.item}}</td>
</tr>
Angular Js Code
for (var k = 0; k < $scope.data.length; k++)
{
if($scope.data[k].selected==true)
{
//Perform your desired thing over here
var val=$scope.data[k].item //to getData
}
}
Please find the fiddler link which i have created to select all the items in the table and on delete print which ever is checked https://jsfiddle.net/dfL1L944/3/
var appModule = angular.module('Module', []);
appModule.controller("DataController", function($scope) {
$scope.data = [{"name":"Alex"},{"name":"Juni"}]
$scope.deleteAll = false;
$scope.deleteSeleted = function(){
$scope.data.forEach(function(x) {
console.log(x.name);
});
}
$scope.selectedAll = function(){
$scope.data.forEach(function(x) {
if($scope.deleteAll){
x.deleted = true;
}
else{
x.deleted = false;
}
});
}
});
HTML Code
<div ng-app="Module"> <div ng-controller="DataController">
<button class="ui red labeled icon button right floated" type="button" data-content="Delete selected item(s)" id="delete" ng-click="deleteSeleted()"> <i class="trash icon"></i>Delete</button> <div class='container-table'> <table class="ui fixed single line celled table striped sortable compact" style="width:200px" id="mytable"> <thead>
<tr>
<th width="20px">
<input type="checkbox" ng-model="deleteAll" ng-click="selectedAll()" /></th>
<th>Item</th>
</tr> </thead> <tbody>
<tr ng-repeat="x in data">
<td width="2px"><input type="checkbox" ng-checked="x.deleted"></td>
<td>{{x.name}}</td>
</tr> </tbody> </table> </div>
</div> </div>
You could use $filter (you would need to insert $filter as a dependency)
$scope.data: [ // assuming your model looks like this
{
Id: "my_id",
Name: "my_name",
checked: true
}
];
var myFilteredValues = $filter('filter')($scope.data, { $: true });
And in your HTML
<tr ng-repeat="x in data">
<td><input type="checkbox" ng-model="x.checked"></td>
<td>{{x.Name}}</td>
</tr>
You can add a .toDelete property to every x in your data array, for example, and bind the checkboxes like this:
<input type="checkbox" ng-model="x.toDelete">
Afterwards you can create a button under the table:
<input type="button" ng-click="deleteRows();" value="Delete rows">
...And then create a function on your controller's scope (a newbie-friendly function):
$scope.deleteRows = function(){
var i=0;
for(i=0; i<data.length; i++){
if(data[i].toDelete){
//send your server requests here and do
//your stuff with the element if needed
data.splice(i, 1); //remove the element from the array
i--; //decrement the value of i so it stays the same
//(array is now shorter than it used to be)
}
}
}
You can also keep the information on what row is to be deleted in a separate array on the same scope but this solution seems simpler to me.
Regarding the "Check All" checkbox at the top, you can create a function and bind it with ng-click to a button or any other element and use that function to simply iterate through all the elements and set the .toDelete property to true for each one of them.
This is my html code:
<table>
<tr ng-repeat="park in parkOptions.parks">
<td>
<label for="{{park.park_id}}">
<input id="{{park.park_id}}" type="radio" name="connection" ng-model="$parent.currentPark" value="{{park.park_id}}" ng-click="selectValue('park',park)"/>{{park.park_name}}
</label>
</td>
</tr>
</table>
How can i watch the changes in my model( I mean i want to see in $watch another park when i click radio button)
I've got a working version to help you - Fiddle.
HTML
<div ng-app ng-controller="ParentCtrl">
<div ng-controller="ChildCtrl">
<table>
<tr ng-repeat="park in parkOptions.parks">
<td>
<label for="{{park.park_id}}">
<input id="{{park.park_id}}" type="radio" name="connection" ng-model="parkOptions.currentPark" value="{{park.park_id}}" ng-click="selectValue(park)"/> {{park.park_name}}
</label>
</td>
</tr>
</table>
</div>
</div>
JS
function ParentCtrl($scope) {
}
function ChildCtrl($scope) {
$scope.parkOptions = {};
$scope.parkOptions.parks = [
{park_id: '01', park_name: 'England Park'},
{park_id: '02', park_name: 'France Park'}
];
$scope.$watch('parkOptions.currentPark', function(newValue) {
if (newValue != undefined) {
console.log(newValue);
}
});
}
This may not be exactly what you want (as I see $parent in your code) but we can come to the right solution with any further information from you.
I don't use $parent and prefer sending and receiving events.
I'm displaying subwebs that the current user has access to, in a sharepoint app part.
I've managed to hide or show a message saying "There is no sites avaiable for you" if my app.js returns 0 in the scope.array.
BUT, the message is displaying before the list has finished loading and when the list has loaded the message dissapears. How can I fix that?
I have a ng-repeat in a table with textbox for filtering:
<input type="text" ng-model="text" placeholder="Filter..." />
<div ng-controller="MainCtrl">
<table>
<thead>
<tr>
<th>
Site
</th>
<th>
Created
</th>
</tr>
</thead>
<tbody ng-repeat="site in sites | filter:text">
<tr>
<td>
{{site.title}}
</td>
<td>
{{site.created | date:dateFormat}}
</td>
</tr>
</tbody>
</table>
<div ng-show="!(sites| filter:text).length">There is no sites avaiable for you.</div>
</div>
I understand that the ng-show is outside the table where ng-repeat is executed, but I've tried inserting the ng-show div inside the tbody but then if no sites exist the table is never executed.
Also, how can I disable the filter textbox if the array is empty? Tried the same attributes as ng-show but in ng-disabled, but that doesnt work.
Wait for your success callback to determine there are no results before showing the message.
//view
<div ng-controller="MainCtrl">
<div ng-show="loading">Loading..</div>
<input ng-hide="noSites" ng-model="text" placeholder="Filter...">
//table ..
<div ng-show="noSites">
There are no sites available for you.
</div>
</div>
//controller
app.controller('MainCtrl', function($scope) {
//initialize
$scope.loading = true
$scope.noSites = false
//sharepoint code to get sites
.success(function(data) {
if (data.length != 0) {
$scope.sites = data
} else {
$scope.noSites = true
}
$scope.loading = false
})
})
<input type="text" ng-model="text" placeholder="Filter..." />
put this inside the <div ng-controller="MainCtrl">.. div
and modify this
<div ng-show="!sites.length" style="display:none">There is no sites avaiable for you.</div> // added `display:none