I have an application in AngularJS (I'm begginer..sorry!) that needs to show diferents tables when I click on the menu.
Problem: simulado1.htm is appearing when I click in the menu, but its table isn't.
What should I do?
It's a SPA using the ng-route and
Thanks everybody!
<!DOCTYPE html>
<html ng-app="app1">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script src="scripts/route-config.js"></script>
<script src="scripts/table.js"></script>
<link rel="stylesheet" href="styles/style.css">
</head>
<header>
<h2>MEDGRUPO</h2>
</header>
<nav>
<div id="menu-simulados">
<ul> <!-- This is a menu to choose which "simulado" (table) you want to -->
<li>Simulado 1</li>
<li>Simulado 2</li>
<li>Simulado 3</li>
</ul>
</div>
</nav>
<body ng-app="myModule">
<div ng-view></div>
</body>
</html>
// ARCHIVE route-config.js //
var app = angular.module("app1", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm",
controller : "MainCtrl",
})
.when("/simulado1", {
templateUrl : "simulado1.htm",
controller : "Sim1Ctrl",
})
.when("/simulado2", {
templateUrl : "simulado2.htm",
controller : "Sim2Ctrl",
})
.when("/simulado3", {
templateUrl : "simulado3.htm",
controller : "Sim3Ctrl",
});
});
Here it's my archive table.js with the table parameters:
//<reference path="angular.js" />
var app = angular.module("myModule", []).controller("myController", function ($scope) {
var tabela = [
{ posicao: "1", nota: "10", matricula: "897413", especialidade: "clinica medica", turma: "2008 MEDCURSO SALVADOR - Turma A/2008 MED SALVADOR" , filial:"Salvador (BA)" },
{ posicao: "2", nota: "40", matricula: "897413", especialidade: "cardiologia", turma: "2008 MEDCURSO SP - Turma A/2008 MED SP", filial:"São Paulo (SP)" },
{ posicao: "3", nota: "50", matricula: "205500", especialidade: "cardiologia", turma: "2008 MEDCURSO SP - Turma A/2007 MED SP" , filial:"São Paulo (SP)"},
{ posicao: "4", nota: "90", matricula: "897413", especialidade: "pediatria", turma: "2008 MEDCURSO NATAL - Turma A/2008 MED NATAL", filial:"Natal (RN)" },
{ posicao: "5", nota: "80", matricula: "205500", especialidade: "clinica medica", turma: "2008 MEDCURSO NATAL - Turma A/2005 MED NATAL", filial:"Natal (RN)" },
{ posicao: "6", nota: "70", matricula: "897416", especialidade: "clinica medica", turma: "2008 MEDCURSO NATAL - Turma A/2008 MED NATAL", filial:"Natal (RN)" },
{ posicao: "7", nota: "10", matricula: "205500", especialidade: "clinica medica", turma: "2008 MEDCURSO SALVADOR - Turma A/2006 MED SALVADOR", filial:"Salvador (BA)" },
{ posicao: "8", nota: "10", matricula: "897413", especialidade: "urologia", turma: "2008 MEDCURSO SALVADOR - Turma A/2008 MED SALVADOR", filial:"Salvador (BA)" },
{ posicao: "9", nota: "50", matricula: "897415", especialidade: "clinica medica", turma: "2008 MEDCURSO SALVADOR - Turma A/2008 MED SALVADOR", filial:"Salvador (BA)" },
];
$scope.tabela = tabela;
});
// archive simulado1.htm //
<body ng-app="myModule">
<div ng-controller="myController">
Entre com sua Matrícula :
<input type="text" ng-model="searchText.matricula" placeholder="Pesquisar matricula" />
<br><br><br>
<span>
<select ng-model="searchText.especialidade">
<option value="">Especialidades - Todas</option>
<option value="cardiologia">cardiologia</option>
<option value="clinica medica">clinica medica</option>
<option value="pediatria">pediatria</option>
<option value="urologia">urologia</option>
</select>
</span>
<span>
<select ng-model="searchText.turma">
<option value="">Turmas - Todas</option>
<option value="2008 MEDCURSO SALVADOR - Turma A/2008 MED SALVADOR">2008 MEDCURSO SALVADOR - Turma A/2008 MED SALVADOR</option>
<option value="2008 MEDCURSO Natal - Turma A/2008 MED NATAL">2008 MEDCURSO Natal - Turma A/2008 MED NATAL</option>
<option value="2008 MEDCURSO SP - Turma A/2008 MED SP">2008 MEDCURSO SP - Turma A/2008 MED SP</option>
<option value="2008 MEDCURSO SP - Turma A/2007 MED SP">2008 MEDCURSO SP - Turma A/2007 MED SP</option>
<option value="2008 MEDCURSO NATAL - Turma A/2008 MED NATAL">2008 MEDCURSO NATAL - Turma A/2008 MED NATAL</option>
<option value="2008 MEDCURSO NATAL - Turma A/2005 MED NATAL">2008 MEDCURSO NATAL - Turma A/2005 MED NATAL</option>
<option value="2008 MEDCURSO SALVADOR - Turma A/2006 MED SALVADOR">2008 MEDCURSO SALVADOR - Turma A/2006 MED SALVADOR</option>
<option value="2008 MEDCURSO SALVADOR - Turma A/2008 MED SALVADOR">2008 MEDCURSO SALVADOR - Turma A/2008 MED SALVADOR</option>
</select>
</span>
<span>
<select ng-model="searchText.filial">
<option value="">Filiais - Todas</option>
<option value="Natal">Natal</option>
<option value="Salvador">Salvador</option>
<option value="SP">SP</option>
</select>
</span>
<br><br><br>
<span style="width:100%" onclick="imprimir()" class="imprimir">Imprimir |</span>
<div id="tabelaimpressao">
<table>
<thead>
<tr>
<th>Posição</th>
<th>Nota</th>
<th>Matrícula</th>
<th>Especialidade</th>
<th>Turma</th>
<th>Filial</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="simulado in tabela | filter:searchText">
<td> {{ simulado.posicao }} </td>
<td> {{ simulado.nota }} </td>
<td> {{ simulado.matricula }} </td>
<td> {{ simulado.especialidade }} </td>
<td> {{ simulado.turma }} </td>
<td> {{ simulado.filial }} </td>
</tr>
</tbody>
</table>
two fixes:
1. I removed line 9 from index.html because you were linking 2 times the angular file.
2. Corrected your controller's statement without declaring a new module. As:
app.controller ("myController", function ($ scope) {
There your table loaded by clicking on the link.
In simulado1.htm no need to set the ng-app and ng-controller again as you are setting the routes in the router config.
<body ng-app="myModule"> //remove this
<div ng-controller="myController"> //remove this
Related
i'm trying to make my {{client.tenant}} be the source to filter out my table later on. the table should only view customer 1 or customer 2 based on the selection in my dropdown list. I have the feeling the input in my dropdown list isn't stored anywhere. do you have some tips what im doing wrong? down is a sample from my code. i tested around alot so sorry for the code.:)
<body>
<div class="container" ng-controller="menuController">
<select>
<option ng-model="dropdownString" ng-repeat="client in products | unique:'tenant'">{{client.tenant}}</option>
</select>
<div class="tab-content">
<ul class="media-list tab-pane fade in active">
<div class="row row-content">
<div class="col-xs-12">
<ul class="media-list">
<li class="media">
<div class="media-left media-middle">
</div>
<div class="media-body">
<table>
<tr>
<th class="table-1">Product description</th>
<th>SKU</th>
<th>Tenant</th>
<th>Select</th>
</tr>
<tr ng-repeat="product in products | searchFor:searchString">
<td>{{product.description}}</td>
<td>{{product.sku}}</td>
<td>{{product.tenant}}</td>
<td><input type="checkbox"></td>
</tr>
</table>
</div>
</li>
</ul>
</ul>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script>
var app = angular.module('productBackend', []);
app.controller('menuController', function ($scope, $http) {
$scope.search=[];
$http.get('./scripts/products.json')
.then(function (res) {
$scope.products = res.data;
});
});
app.filter('searchFor', function () {
return function (arr, searchString) {
if (!searchString) {
return arr;
}
var result = [];
searchString = searchString.toLowerCase();
angular.forEach(arr, function (item) {
if (item.tenant.toLowerCase().indexOf(searchString) !== -1) {
result.push(item);
}
});
return result;
};
});
app.filter('unique', function() {
return function(collection, keyname) {
var output = [],
keys = [];
angular.forEach(collection, function(item) {
var key = item[keyname];
if(keys.indexOf(key) === -1) {
keys.push(key);
output.push(item);
}
});
return output;
};
});
app.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
singleSelect: null,
multipleSelect: [],
option1: 'option-1'
};
$scope.forceUnknownOption = function() {
$scope.data.singleSelect = 'nonsense';
};
}]);
</script>
</body>
Json File:
[{
"sku": "S-MLX-SEC-002",
"description": "Intrusion Prevention",
"tenant": "Customer 1"
}, {
"sku": "S-MLX-MCA-007",
"description": "Microsoft Lync Enterprise - Private Cloud",
"tenant": "Customer 1"
},{
"sku": "S-MLX-SEC-002",
"description": "Intrusion Prevention",
"tenant": "Customer 1"
}, {
"sku": "S-MLX-SEC-004",
"description": "Local privacy compliance",
"tenant": "Customer 1"
}, {
"sku": "S-MLX-S02-100",
"description": "Location based Access",
"tenant": "Customer 1"
},{
"sku": "S-MLX-SEC-002",
"description": "Intrusion Prevention",
"tenant": "Customer 1"
}, {
"sku": "S-MLX-S02-510",
"description": "Two factor authentication - Hard Token Security",
"tenant": "Customer 1"
}, {
"sku": "S-MLX-MCA-007",
"description": "Microsoft Lync Enterprise - Private Cloud",
"tenant": "Customer 1"
},{
"sku": "S-MLX-CHG-001",
"description": "Changes level Business - for Global Desktop Bundel",
"tenant": "Customer 1"
}, {
"sku": "S-MLX-GLD-003",
"description": "Global Desktop Business Bundel - Performance - Private Cloud",
"tenant": "Customer 1"
}, {
"sku": "S-MLX-GLD-012",
"description": "Global Desktop Foundation - Standard - Private Cloud",
"tenant": "Customer 1"
},{
"sku": "S-MLX-OFF-001",
"description": "Microsoft Office Standard - Private Cloud",
"tenant": "Customer 1"
}, {
"sku": "S-MLX-LOB-824",
"description": "Exact Financials (CL) - Private Cloud",
"tenant": "Customer 1"
}, {
"sku": "S-MLX-MCA-007",
"description": "Microsoft Lync Enterprise - Private Cloud",
"tenant": "Customer 2"
},{
"sku": "S-MLX-SEC-002",
"description": "Intrusion Prevention",
"tenant": "Customer 2"
}, {
"sku": "S-MLX-SEC-004",
"description": "Local privacy compliance",
"tenant": "Customer 2"
}, {
"sku": "S-MLX-S02-100",
"description": "Location based Access",
"tenant": "Customer 2"
},{
"sku": "S-MLX-SEC-002",
"description": "Intrusion Prevention",
"tenant": "Customer 2"
}, {
"sku": "S-MLX-S02-510",
"description": "Two factor authentication - Hard Token Security",
"tenant": "Customer 2"
}, {
"sku": "S-MLX-MCA-007",
"description": "Microsoft Lync Enterprise - Private Cloud",
"tenant": "Customer 2"
},{
"sku": "S-MLX-CHG-001",
"description": "Changes level Business - for Global Desktop Bundel",
"tenant": "Customer 2"
}, {
"sku": "S-MLX-GLD-003",
"description": "Global Desktop Business Bundel - Performance - Private Cloud",
"tenant": "Customer 2"
}, {
"sku": "S-MLX-GLD-012",
"description": "Global Desktop Foundation - Standard - Private Cloud",
"tenant": "Customer 2"
},{
"sku": "S-MLX-OFF-001",
"description": "Microsoft Office Standard - Private Cloud",
"tenant": "Customer 2"
}, {
"sku": "S-MLX-LOB-824",
"description": "Exact Financials (CL) - Private Cloud",
"tenant": "Customer 2"
}]
Plunkr
https://embed.plnkr.co/hfB75e6w9sYZzDkwyh24/
you just change the following code
<select>
<option ng-model="dropdownString" ng-repeat="client in products | unique:'tenant'">{{client.tenant}}</option>
</select>
to
<select ng-model="dropdownString" >
<option ng-repeat="client in products | unique:'tenant'">{{client.tenant}}</option>
</select>
I'm not sure it will work or not.
this is how I fix you problem. My code is given below :
HTML
<input type="text" class="search" ng-model="searchx.sku" placeholder="Enter your search terms" />
<select ng-model="searchx.tenant">
<option ng-repeat="client in products | unique:'tenant'">{{client.tenant}}</option>
</select>
<div class="tab-content">
<ul class="media-list tab-pane fade in active">
<div class="row row-content">
<div class="col-xs-12">
<ul class="media-list">
<li class="media">
<div class="media-left media-middle">
</div>
<div class="media-body">
<table>
<tr>
<th class="table-1">Product description</th>
<th>SKU</th>
<th>Tenant</th>
<th>Select</th>
</tr>
<tr ng-repeat="product in products | filter: searchx">
<td>{{product.description}}</td>
<td>{{product.sku}}</td>
<td>{{product.tenant}}</td>
<td><input type="checkbox"></td>
</tr>
</table>
</div>
</li>
</ul>
</ul>
</div>
Angular.js
var app = angular.module('productBackend', []);
app.controller('menuController', function ($scope, $http) {
$scope.searchx = {};
$scope.search=[];
$http.get('./products.json')
.then(function (res) {
$scope.products = res.data;
});
});
app.filter('unique', function() {
// same code
});
app.controller('ExampleController', ['$scope', function($scope) {
// same code
}]);
I have json of all countries with me.
{"countries":[
{"name":"Afghanistan","code":"AF"},
{"name":"Åland Islands","code":"AX"},
{"name":"United States","code":"US"},
{"name":"Canada","code":"CA"},
{"name":"India","code":"IN"}
]};
I want to create drop down like
"
Choose Country(Default)
United States
Canada
------------
Åland Islands
Afghanistan
India
So on..."
I can be achieved via ng-repeat like
<select name="country" id="country" data-ng-model="country" required data-ng-change="allSelect()">
<option value="default" data-ng-data-ng-bind="'Choose Country'"></option>
<option value="{{cList.code}}" data-ng-if="cList.code === 'US'" data-ng-repeat="cList in countries" data-ng-bind="cList.name"></option>
<option value="{{cList.code}}" data-ng-repeat="cList in countries" data-ng-bind="cList.name"></option>
<option value="default1">--------------------------------------------------</option>
<option value="{{cList.code}}" data-ng-if="cList.code !== 'US' && cList.code !== 'CA'" data-ng-repeat="cList in countries" data-ng-bind="cList.name"></option>
</select>
How can i do same via ng-options?
Currently if i want to select any option by default is not happening its creating blank string.
Country list and default values i am getting from different ajax call.
You need to make some changes to your JSON
JSON
{
"Collections": [{
"Name": "North America",
"Countries": [{
"Name": "United States",
"code": "US"
}, {
"Name": "Canada",
"code": "CA"
}
]
}, {
"Name": "Asia",
"Countries": [{
"Name": "India",
"value": "IN"
}
]
}]
}
HTML
<body ng-controller="dobController">
<div class="col-md-20">
<div id="main">
<form class="form-horizontal" role="form">
<label class="control-label col-md-2">Filter List:</label>
<div class="col-md-5">
<select ng-model='theModel' ng-change="display(theModel)">
<optgroup ng-repeat='group in collection' label="{{group.Name}}">
<option ng-repeat='veh in group.Countries' value='{{group.Name}}::{{veh.Name}}'>{{veh.Name}}</option>
</optgroup>
</select>
</div>
</form>
</div>
</div>
Controller
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope", "$http",
function($scope, $http) {
$http.get('test.json').then(function(response) {
$scope.collection = response.data.Collections;
console.log(response);
});
$scope.display = function(name) {
alert(name.split("::")[0] + "." + name.split("::")[1]);
}
}
]);
DEMO
I am getting "Uncaught Error: [$injector:modulerr]". Can anyone help me to solve this. My code is as follows..
<!DOCTYPE html>
<html>
<head>
<style>
body {
max-width: 32em;
margin: 1em auto 0;
}
img { width: 30px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
// https://angular-ui.github.io/
// setup app and pass ui.bootstrap as dep
var myApp = angular.module("angularTypeahead", ["ui.bootstrap"]);
// define factory for data source
myApp.factory("States", function(){
var states = ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Dakota", "North Carolina", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"];
return states;
});
// setup controller and pass data source
myApp.controller("TypeaheadCtrl", function($scope, States) {
console.log("hello");
$scope.selected = undefined;
$scope.states = States;
});
</script>
</head>
<body>
<div ng-app="angularTypeahead">
<div class="container-fluid" ng-controller="TypeaheadCtrl">
<h2><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo"> Angular.js Typeahead</h2>
<div class="form-group">
<label for="states">Search for US States</label>
<input name="states" id="states" type="text" placeholder="enter a state" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
</div>
<button class="btn btn-success" type="submit">Submit</button>
</div>
</div>
</body>
</html>
Am I did wrong anywhere? I got this code from codepen. It is running perfectly there. But Its is not running in my local
I need to set width of the autocomplete input in the Angular Kendo.
How can i do it programatically please?
Thanks for any help.
Setting it with an initial value, you should use style="width: 200px;".
Example:
<input kendo-auto-complete="my_autocomplete" ng-model="country" k-data-source="countryNames" style="width: 200px" />
If then you need to modify it, you should change the width via css method for wrapper element.
Example
$scope.my_autocomplete.wrapper.css("width", "300px");
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.countryNames = [
"Albania",
"Andorra",
"Armenia",
"Austria",
"Azerbaijan",
"Belarus",
"Belgium",
"Bosnia & Herzegovina",
"Bulgaria",
"Croatia",
"Cyprus",
"Czech Republic",
"Denmark",
"Estonia",
"Finland",
"France",
"Georgia",
"Germany",
"Greece",
"Hungary",
"Iceland",
"Ireland",
"Italy",
"Kosovo",
"Latvia",
"Liechtenstein",
"Lithuania",
"Luxembourg",
"Macedonia",
"Malta",
"Moldova",
"Monaco",
"Montenegro",
"Netherlands",
"Norway",
"Poland",
"Portugal",
"Romania",
"Russia",
"San Marino",
"Serbia",
"Slovakia",
"Slovenia",
"Spain",
"Sweden",
"Switzerland",
"Turkey",
"Ukraine",
"United Kingdom",
"Vatican City"
];
setTimeout(function() {
alert("Changing width");
$scope.my_autocomplete.wrapper.css("width", "300px");
}, 4000);
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<input kendo-auto-complete="my_autocomplete" ng-model="country" k-data-source="countryNames" style="width: 200px" />
</div>
</div>
I have the following code for autoComplete
<div id="ng-app" ng-app ng-controller="AutoCtrls">
<input list="names" ng-model="selected">
<datalist id="names">
<option value="{{name}}" ng-repeat="name in names"></option>
</datalist>
selected = {{selected}}
</div>
and in app.js
function AutoCtrls($scope, Restangular) {
$scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar",
"marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean",
"paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert",
"edouard", "benoit", "guillaume", "nicolas", "joseph"];
alert('ok 1');
}
The problem I am facing is this doesn't work in IE8, however this does work in Chrome and Firefox.
What could be the reason and how can I fix the issue?
IE8 and 9 don't support <datalist>: http://caniuse.com/datalist