I have an app in which users copy and paste tab delimited text. I want to take the text and make into a table (each new column is a tab and each new row is a new line in the pasted text.
I have the following which builds a list for each new line in the pasted text, but how do I get an array from tab delimited text?
<div ng-app>
<textarea ng-model="items" ng-list="/\n/"></textarea>
<table>
<tbody>
<tr ng-repeat="item in items">
<td>
{{item}}
</td>
</tr>
</tbody>
</table>
</div>
Since I can't paste tab delimited text here without it reformatting... To get tab delimited text copy and paste from Notepad or a spreadsheet.
Does this work for you? http://jsbin.com/bosamuhoti/1/edit
Here's a snippet:
Angular app
angular.module('myapp', [])
.controller('myCtrl', ['$scope', function($scope){
$scope.items = [];
$scope.table = [];
$scope.$watch("items", (newValue, oldValue) => {
for (var item of newValue) {
$scope.table.push(item.split('\t'));
}
});
}]);
And the corresponding HTML
<textarea ng-model="items" ng-list="
" ng-trim="false"></textarea>
<table border="1">
<tbody>
<tr ng-repeat="item in table track by $index">
<td ng-repeat="data in item track by $index">
{{data}}
</td>
</tr>
</tbody>
</table>
Related
I need to open modal window with selected data from cell of table. Now the modal is opened with data but data in modal belong to all row. I need to chose data from item selected cell. I have a two arrays. One in other. I can selected item from first array (dataTable) but there is exist another array (item.arrValues) in the there. I can't to get the selected data from a second array. How can I to display the data from selected cell?
Example here Plnkr
HTML
<table>
<tbody>
<tr>
<td></td>
<td ng-repeat="i in vm.dataTable[0].arrValues">{{i.DAY}}</td>
</tr>
<tr ng-repeat="item in vm.dataTable">
<td>{{item.time}}</td>
<td ng-click="vm.openEvents(item);" ng-repeat="i in item.arrValues">{{i.Value}}</td>
</tr>
</tbody>
</table>
modalContent.html
<div>
<div class="modal-body" style="overflow: hidden;">
<div ng-bind="selected.item.Country"></div>
<!--<div ng-bind="selected.item.arrValues[0].Value"></div>-->
<div ng-repeat="i in selected.item.arrValues">{{i.Value}}</div>
</div>
</div>
JS
vm.openEvents = function(item){
var modalInstance = $modal.open({
scope: $scope,//
templateUrl: "modalContent.html",
controller: ModalInstanceCtrl,
resolve: {
item: function() {
return item;
},
dataTable: function ($timeout) {
return vm.dataTable
}
}
});
}
var ModalInstanceCtrl = function ($scope, dataTable, item) {
var vm = this;
vm.dataTable = dataTable;
$scope.selected = {
item: item
};
}
Change <td> to pass i to the function (i being the value in the cell in this case):
<td ng-click="vm.openEvents(i);" ng-repeat="i in item.arrValues">{{i.Value}}</td>
Change the modal template to display selected.item.DAY and selected.item.Value.
<div>
<div class="modal-body" style="overflow: hidden;">
<div ng-bind="selected.item.DAY"></div>
<div ng-bind="selected.item.Value"></div>
</div>
</div>
Working PLNKR here.
I am trying to learn AngularJS 1.6 and I am trying to populate a table with rows depending on the amount of rows selected in a dropdown list. It could be anywhere from 1 to 12. So far I have the following code.
<body ng-controller="myController">
<div>
<p>Blue Corner Boxer: </p> <input type="text" ng-model="nameBlue">
<br>
<p>Red Corner Boxer: </p> <input type="text" ng-model="nameRed">
<br>
<p>Number of Rounds:</p> <select ng-model="selectedRounds"><option ng-repeat="x in rounds">{{x}}</option></select>
</div>
<div>
<table class="table table-striped">
<thead>
<tr>
<th style="text-align:center">{{nameBlue}}</th>
<th style="text-align:center">Round</th>
<th style="text-align:center">{{nameRed}}</th>
</tr>
</thead>
<tbody class="tablerows">
<tr ng-repeat="x in selectedRounds">
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>
<h2 style="text-align: center">Final Score: </h2> {{scoreBlue1 + ScoreBlue2}}
</div>
</body>
Then in the js file
//Create the module
var myApp = angular.module("myModule", []);
//Create the controller and register the module in one line
myApp.controller("myController", function ($scope) {
$scope.message = "AngularJS tutorial";
$scope.score = [1,2,3,4,5,6,7,8,9,10];
$scope.rounds = [1,2,3,4,5,6,7,8,9,10,11,12];
});
So far the table will add 1 row on selection of anything 1 to 9, but 10 to 12 adds 2 rows. So I think I am wondering how to create an array length of size "selectedrounds" that will repeat rows with the repeater.
Thanks
If you need an array only for iterating and you don't worry about data in it. You can do something like this:
In your controller:
$scope.selectedRounds = 0;
$scope.getRoundsArray(){
return new Array($scope.selectedRounds);
}
We just create an array with needed length and with all elements are 'undefined'. If you create an array with 3 lenght you will get: ['undefined', 'undefined', 'undefined'].
In view:
<tr ng-repeat="x in getRoundsArray() track by $index">
You need this track by $index cause your array contains only 'undefined' values so to prevent angular arguing about duplicate keys we need to use track by.
I have 2 HTML pages. In my index.html page you can see products information that comes from JSON file. I need to have detail of product in detail.html page when people click on particular product. Alert can show the details but unfortunately the innerHTML of my <p> does not change, please guide me.
<div ng-app="myApp" ng-controller="AppController">
<div id="serachWrapper">
<h1 id="headerTopic">Our Products</h1>
<input id="searchInput" name="search" type="text" placeholder="Search products" ng-model="searchquery"/>
<table id="searchTable">
<thead id="tbHead">
<tr class="tbRow">
<th class="tbTopics">ID</th>
<th class="tbTopics">Name</th>
<th class="tbTopics">Color</th>
<th class="tbTopics">Type</th>
<th class="tbTopics">Capacity</th>
<th class="tbTopics">Price</th>
</tr>
</thead>
<tbody id="tbBody">
<tr class="tbRow" ng-repeat="x in myData | filter:searchquery ">
<td class="tbcontents" >{{x.id}}</td>
<td class="tbcontents">{{x.name}}</td>
<td class="tbcontents">{{x.color}}</td>
<td class="tbcontents">{{x.type}}</td>
<td class="tbcontents">{{x.capacity}}</td>
<td class="tbcontents">{{x.price}}</td>
</tr>
</tbody>
</table>
</div>
And this is my Angular js code:
var app = angular.module('myApp', ['ngSanitize']);
app.controller('AppController', AppController);
function AppController($scope , $http) {
$http.get("products.json").success(function(myData){
$scope.myData = myData;
$scope.go = function(item){
var detail = item.detail;
var productDetail = angular.element(document.getElementById('product-detail')).html();
productDetail = detail;
alert(detail)
};
});
}
You can keep both codes in the page and to solve this with an ng-if directive
Angular ng-if directive
<body ng-app="ngAnimate">
<label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>
Show when checked:
<span ng-if="checked" class="animate-if">
This is removed when the checkbox is unchecked.
</span>
</body>
Why is your $scope.go function defined inside the http.get request?
Try:
function AppController($scope , $http) {
$http.get("products.json").success(function(myData){
$scope.myData = myData;
});
$scope.go = function(item) {
var detail = item.detail;
var productDetail = angular.element(document.getElementById('product-detail')).html();
productDetail = detail;
alert(detail)
};
}
Below is my plunker in which I'm tring to display the output types based on different months.I want to save the maximum capacity for each month on click of save button by getting all the values in an array.But when I type in a text box the value gets repeated as the index is repeated column wise.
ng-repeat in table
Below is the code:
JavaScript:
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.outputType=["Coal","ROM","WASTE"];
$scope.months=["JAN","FEB","MARCH","APRIL"];
$scope.values = [];
$scope.save=function(){
alert($scope.values)
}
});
HTML:
<table style="border:1px solid red;">
<thead>
<tr>
<th> </th>
<th ng-repeat="i in months"><b>{{i}}</b></th>
</tr>
</thead>
<tbody ng-repeat="item in outputType">
<tr>
<td>{{item}} </td>
<td ng-repeat="i in months">
<input type="text" ng-model="values[$index]"
placeholder="Max.Capacity">
</td>
</tr>
</tbody>
</table>
Check that http://plnkr.co/edit/4DUDIBoTOCI4J89FiQeM?p=preview
JS
$scope.values = {};
HTML
<input type="text" ng-model="values[item][i]" placeholder="Max.Capacity">
or
<input type="text" ng-model="values[i][item]" placeholder="Max.Capacity">
Solution if you want to leave an array.
You need to change your ngModel in input
<input type="text" ng-model="values[$index]" placeholder="Max.Capacity">
to
ng-model="values[$parent.$index][$index]".
Here is an example:
Example
Given the following HTML fragment, how can I create the content of the td depending on the column.
<div ng-app="" ng-controller="controller" >
<table>
<tr>
<th ng-repeat="column in columns">
{{ column.header }}
</th>
<tr ng-repeat="row in rows">
<td ng-repeat="column in columns">
<!-- TODO -->
</td>
</tr>
</table>
</div>
Each column can show a different kinds of data. For example, one might just show a string, another might contain a text input field that is bound to a property of the row.
I would like to call a function on the column (column.createCell(row)) that creates that necessary HTML and then put the result in place of <!-- TODO -->.
In WPF, I would just put a ContentPresenter with a DataTemplateSelector, but I don't know what the equivalent is in Angular. I read about something called "ng-bind-html", is that the way to go?
It's not given what kind of custom element you want to build for each column, but for DOM manipulation in AngularJS best practise is to keep it in a directive. Something like this:
in your html:
<body ng-controller="MainCtrl">
<table>
<tr ng-repeat="row in rows">
<td ng-repeat="column in row">
<custom-column="column"></custom-column>
</td>
</tr>
</table>
</body>
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
// whatever you wanted to define here...
$scope.rows = ...
$scope.columns = ...
});
app.directive('customColumn', function() {
return {
scope: {
obj: '=customColumn',
},
link: function(scope, element, attrs) {
var watcher = scope.$watch('obj', function(obj) {
if (!obj) return;
// build custom element
var html = '<div>'+scope.obj.name+'</div>';
element.html(html);
// delete watch if you only need to draw once
watcher();
});
}
}
});