I would like to use a handsontable inside a ng-switch: when we select handsontable, it shows a normal and editable handsontable.
JSBin
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://docs.handsontable.com/pro/1.8.2/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.8.2/bower_components/handsontable-pro/dist/handsontable.full.min.css">
</head>
<body ng-app="">
<select ng-model="myVar">
<option value="dogs">Dogs
<option value="handsontable">handsontable
</select>
<div ng-switch="myVar">
<div ng-switch-when="dogs">
<p>Welcome to a world of dogs.</p>
</div>
<div ng-switch-when="handsontable">
<div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>
</div>
</div>
</body>
</html>
JavaScript:
var example1 = document.getElementById('example1');
var settings1 = { data: [['A1', 'B1'], ['A2', 'B2']] };
var hot1 = new Handsontable(example1, settings1);
Unlike this working example, the cells in the table are NOT editable. So I am wondering if there is something missing. For example in the working example, the creation of the table is wrapped by document.addEventListener("DOMContentLoaded", function() { ... }), should I wrap the javascript code in this example by something to make sure we create the table only after we ng-switch to handsontable?
So as #Mistailis suggested, we could use ngHandsontable.
JSBin
HTML:
<!DOCTYPE html>
<html>
<head>
<base href="http://handsontable.github.io/ngHandsontable/node_modules/">
<link rel="stylesheet" href="handsontable/dist/handsontable.full.css">
<script src="angular/angular.js"></script>
<script src="handsontable/dist/handsontable.full.js"></script>
<script src="../dist/ngHandsontable.js"></script>
</head>
<body ng-app="app">
<select ng-model="myVar">
<option value="dogs">Dogs
<option value="handsontable">handsontable
</select>
<div ng-switch="myVar">
<div ng-switch-when="dogs">
<p>Welcome to a world of dogs.</p>
</div>
<div ng-switch-when="handsontable">
<div ng-controller="MainCtrl as ctrl">
<hot-table datarows="ctrl.db.items"></hot-table>
</div>
</div>
</div>
</body>
</html>
JavaScript:
function dataFactory () { };
dataFactory.$inject = [];
angular.module('ngHandsontable').service('dataFactory', dataFactory);
function MainCtrl(dataFctory) {
this.db = { items: [[5, 6], [7, 8]] };
}
MainCtrl.$inject = ['dataFactory'];
angular
.module('app', ['ngHandsontable'])
.controller('MainCtrl', MainCtrl);
Related
Hi Guys I am an Entry level programmer for angularJS i tried to use ng-show but i dont know why its not been working. I used latest version of Angular js-1.7.9.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index Page</title>
</head>
<body >
<div ng-app="myApp">
Enter Your Name: <input type="text" ng-model="firstName">
<br>
<b>{{firstName}}</b>
<div ng-controller="ShowController">
<button ng-click="showParagaph()">Click Me</button>
<p ng-show="visible">Hello world</p>
</div>
</div>
<script src="./js/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('ShowController', function($scope) {
$scope.visible=true;
$scope.showParagraph = function() {
$scope.visible=false;
};
});
</script>
</body>
</html>
I tried to solve by many possibilites but couldn't get on the error. Thanks in Advance.
Fix the typo:
̶<̶b̶u̶t̶t̶o̶n̶ ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶s̶h̶o̶w̶P̶a̶r̶a̶g̶a̶p̶h̶(̶)̶"̶>̶C̶l̶i̶c̶k̶ ̶M̶e̶<̶/̶b̶u̶t̶t̶o̶n̶>̶
<button ng-click="showParagraph()">Click Me</button>
var app = angular.module('myApp', []);
app.controller('ShowController', function($scope) {
$scope.visible=true;
$scope.showParagraph = function() {
$scope.visible=false;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="myApp">
Enter Your Name: <input type="text" ng-model="firstName">
<br>
<b>{{firstName}}</b>
<div ng-controller="ShowController">
<button ng-click="showParagraph()">Click Me</button>
<p ng-show="visible">Hello world</p>
</div>
</body>
I am using Angular Js v1.6.1. I used following code to generate select list
<select class="form-control" ng-model="selectedLocation">
<option ng-repeat="item in locations" value="{{item}}">
{{item}}
</option>
</select>
In Google chrome I am getting results as excepted as shown in image below.
But in firefox, I got the following results
There is blank after select location in firefox. How to resolve this issue?
Location Object:
Bootstrap Version: 3.3.7
FireFox version: 51.0.1 (32-bit)
It is not recommended way to use ng-repeat in options if you want to generate options dynamically.
Try ng-options instead.
Can you check the below and let me know if the problem still persist ?.
(function() {
'use strict';
angular.module('myApp', []);
angular.module('myApp').controller('MainCtrl', ['$scope',
function($scope) {
$scope.locations = ['Farm1', 'Farm2', 'All'];
}
]);
}());
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body class="container" ng-controller="MainCtrl">
<div>Select Item</div>
<select class="form-control" ng-init="selectedLocation= locations[0]" ng-model="selectedLocation" ng-options="item as item for item in locations" style="width:150px">
</select>
<div>Selected item: {{selectedLocation}}</div>
</body>
</html>
Here I used same version but I don't have any problem . plunker here and image here
// Code goes here
var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
$scope.locations = ['Farm1', 'Farm2', 'All'];
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="jquery#2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script data-require="angular.js#1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body class="container" ng-controller="MainCtrl">
<div>Select Item</div>
<select class="form-control" ng-model="selectedLocation">
<option ng-repeat="item in locations" value="{{item}}">
{{item}}
</option>
</select>
<div>Selected item: {{selectedLocation}}</div>
</body>
</html>
Please look at the following code:
<html lang="en" >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="flexbox" >
<div id="wrapper" ng-controller="flex-ctrl as ctrl">
<div id="aside">
<p ng-repeat="item in ctrl.buttons"> {{item}} </p>
</div>
</div>
</body>
</html>
var app = angular.module("flexbox", []);
app.controller("flex-ctrl", ['$scope', function($scope) {
$scope.buttons = ['a','b', 'c'];
}]);
I expect to see three <p> items. However, it looks like ng-repeat is ignored and I see an empty page.
Do you know what is the problem?
For your convenience: http://codepen.io/CrazySynthax/pen/yVwWdo
Use this.buttons instead of $scope.buttons since you are using controller as syntax
var app = angular.module("flexbox", []);
app.controller("flex-ctrl", ['$scope', function($scope) {
this.buttons = ['a','b', 'c'];
}]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
</head>
<body ng-app='flexbox'>
<div id="wrapper" ng-controller="flex-ctrl as ctrl">
<div id="aside">
<p ng-repeat="item in ctrl.buttons"> {{item}} </p>
</div>
</div>
</body>
</html>
Since you are using controller as syntax you can change your ctrl like so:
var app = angular.module("flexbox", []);
app.controller("flex-ctrl", [function() {
var vm = this;
vm.buttons = ['a','b', 'c'];
}]);
hope it helps.
Your variable is in $scope, so you can just loop over it with:
<p ng-repeat="item in buttons"> {{item}} </p>
Instead of
<p ng-repeat="item in ctrl.buttons"> {{item}} </p>
Forked your Codepen here.
I want to filter the ng-repeat values using
ng-repeat="obj in object | filter :searchtext"
but it should show the result only after the user give values to the searchtext.
it shouldn't list out the values on page load itself.
Thanks in advance :)
you can use ng-show=searchtext on ng-repeat element.
try this snippet
function ListCrtl($scope) {
$scope.items = [1, 2, 3, 4, 5];
}
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
</head>
<body>
<div ng-controller="ListCrtl">
<input ng-model="search.term" />
<p ng-show="search.term" ng-repeat="item in items|filter:search.term">{{item}}</p>
</div>
</body>
</html>
Have condition like this
ng-if="searchtext" ng-repeat="obj in object | filter :searchtext"
Example:
<!doctype html>
<html ng-app="docsSimpleDirective">
<head>
<script type="text/javascript" src="http://code.angularjs.org/1.2.13/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<input type="search" class="form-control" placeholder="Rechercher" data-ng-model="search" />
<div ng-if="search" ng-repeat="departement in depatements | filter:search">
<pre>{{departement}}</pre>
</div>
</div>
</body>
</html>
script.js:
angular.module('docsSimpleDirective', [])
.controller('Ctrl', function($scope) {
$scope.depatements = [
{"codeDept": "01", "libelleDept": "D1", "libelleRegion":"R1", "codeRegion": "04"},
{"codeDept": "02", "libelleDept": "D2", "libelleRegion":"R2", "codeRegion": "08"},
{"codeDept": "03", "libelleDept": "D3", "libelleRegion":"R3", "codeRegion":"09"}
];
})
I have a working table with a filter:
http://plnkr.co/edit/WnV7OUplcLHVOKbeTrSw?p=preview
After wrapping it in a tabset it stops working (the filter is still updated):
http://plnkr.co/edit/8uw2UhSC59txms5X563L?p=preview
But it worked with old versions before I updated:
http://plnkr.co/edit/eJvYtpc3efkydsQy8caL?p=preview
(angular 1.0.8 + bootstrap 2.0.3 + angular-ui-bootstrap-0.6.0)
Why did it stop working after the update?
http://plnkr.co/edit/70sLuA4gltgxhwTE0XT1
HTML (Just modified the filter usage)
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="TabsDemoCtrl">
<tabset>
<tab heading="broken filter">
<form class="form-inline" role="form">
<select id="okFilterbox" ng-model="okFilterBool">
<option>nothing</option>
<option>all</option>
</select>
</form>
<p>{{okFilterBool}}</p>
<div>
<table>
<tr ng-repeat="item in items | filterItem:okFilterBool">
<td>{{item.name}}</td>
</tr>
</table>
</div>
</tab>
<tab heading="tab2">
</tab>
</div>
</body>
</html>
JS (Changed the way the filter is defined to make a new 'Angular' filter)
angular.module('plunker', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {
$scope.okFilterBool = "all";
$scope.items = [
{ name: 'A'},
{ name: 'B'},
{ name: 'C'}
];
};
angular.module("plunker").filter("filterItem", function(){
return function(array, okFilterBool){
if(okFilterBool == "all"){ return array; }
return [];
}
})