i am working with angularjs.The problem is that i wrote a controller in directive after a compile function and the output through the compile function is shown as that in the pic. i.e "first in the compile". but the output from the controller is not showing and it's showing an error and the error is displayed in the image i have posted. please help me with this.
am sending the code
var app = angular.module("myapp", []);
app.controller('ctrl', ['$scope', function ($scope) {
$scope.emp = [{ name: "Day", age: "25", salary: "30000", place: "sydney", color: "#FF5733" },
{ name: "Dickinson", age: "34", salary: "6000", place: "disney", color: "#FAB304" },
{ name: "Domeyko", age: "27", salary: "9000", place: "newyork", color: "#0ED1B3" },
{ name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#896BBB" },
{ name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#387037" },
{ name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#F3AE1B" },
{ name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#FAB304" },
{ name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#D10E7B" },
{ name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#0EC8D1" },
{ name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#FFC300 " },
{ name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#D10E5B" },
{ name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#13D0E1" }];
}]);
app.directive('showDetails', function ($interpolate) {
return {
//templateUrl: 'showDetails.html'
compile: function (tElement, tAttributes) {
console.log(tAttributes.text + "-in compile");
},
controller: function ($scope, $element, $attri) {
var v = $interpolate($attri.text)($scope);
//console.log($attri.text + "-in controller");
console.log(v + "-in controller");
}
}
});
<script src="../Scripts/angular.min.js"></script>
<link href="../Content/bootstrap.css" rel="stylesheet" />
<script src="../Scripts/bootstrap.min.js"></script>
<script src="../js/app.js"></script>
<script src="../js/ChildCtrl.js"></script>
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
</head>
<body style="background-image: url('../images/uRzTkNW.jpg');" ng-controller="ctrl">
<div ng-repeat="emps in emp" class="col-md-3">
<div show-details text="first">
</div>
</div>
</body>
</html>
Your problem is this line:
controller: function ($scope, $element, $attri) {
If you click on the link given in the error message it probably explains all this, but the problem is you are trying to inject a service called $attri into your controller but there is no angular service of that name: you probably wanted $attrs. $scope, $element, $attrs, $transclude are all available to inject into a controller as are other angular services.
Related
This is my angular js code
var app = angular.module('DemoApp', []);
app.controller('DemoController', function ($scope) {
$scope.name = [
{ Country: "India", Capital: "New Delhi" },
{ Country: "China", Capital: "Beijing" },
{ Country: "Japan", Capital: "Tokyo" },
{ Country: "France", Capital: "Paris" },
{ Country: "Russia", Capital: "Moscow" },
{ Country: "Nepal", Capital: "Kathmandu" },
{ Country: "England", Capital: "London" },
{ Country: "Belgium", Capital: "Brussels" },
{ Country: "Greece", Capital: "Athens" },
{ Country: "Portugal", Capital: "Lisbon" }]
});
I want to do without bootstrap
You can use a ng-repeat to create a table in angularjs. You can then style your table according to your requirements using css if you don't want to use bootstrap.
var app = angular.module('DemoApp', []);
app.controller('DemoController', function ($scope) {
$scope.countries = [
{ Country: "India", Capital: "New Delhi" },
{ Country: "China", Capital: "Beijing" },
{ Country: "Japan", Capital: "Tokyo" },
{ Country: "France", Capital: "Paris" },
{ Country: "Russia", Capital: "Moscow" },
{ Country: "Nepal", Capital: "Kathmandu" },
{ Country: "England", Capital: "London" },
{ Country: "Belgium", Capital: "Brussels" },
{ Country: "Greece", Capital: "Athens" },
{ Country: "Portugal", Capital: "Lisbon" }]
});
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.js"></script>
<title>Table</title>
</head>
<div ng-app="DemoApp" ng-controller="DemoController">
<table>
<tr><th>{{ Country}}</th>
<th>{{ Capital }}</th></tr>
<tr ng-repeat="x in countries">
<td>{{ x.Country }}</td>
<td>{{ x.Capital }}</td>
</tr>
</table>
</div>
I want to bind id to the ng-model and display name in the input box using uib-typeahead directive. uibtypeahead directive is used from bootstrap.tpls.js file.How can i get this..
<head>
<meta charset="UTF-8">
<title>dynamic form</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.js"></script>
</head>
<body ng-controller="SearchController">
<!-- in uib-typeahead specify that property / attribute name which you want to display in drop down
in filter service specify an object with which you want to compare
for example if you want to compare this object by type then
filter : { type : $viewValue }
<input type="text" ng-model="selected" uib-typeahead="object.name for object in objects | filter: {name:$viewValue} | limitTo:8">
</body>
</html>
controller code of ....
var app = angular.module('search', ['ui.bootstrap']);
app.controller('SearchController', function ($scope){
$scope.selected="";
// Set your object
$scope.objects = [
{id:1, name : 'Dilip', type :{ title : 'a'}},
{id:2, name : 'Devendra', type :{ title : 'b'}},
{id:3, name : 'Jayesh', type :{ title : 'a'}},
{id:4, name : 'Jekin', type :{ title : 'c'}},
{id:5, name : 'Gaurang', type :{ title : 'a'}},
{id:6, name : 'Bhavin', type :{ title : 'e'}},
];
});
angular.module('plunker', ['ui.bootstrap']);
function TypeaheadCtrl($scope) {
$scope.selected = undefined;
$scope.formatLabel = function(model) {
for (var i=0; i< $scope.states.length; i++) {
if (model === $scope.states[i].abbreviation) {
return $scope.states[i].name;
}
}
}
$scope.states = [
{
name: "Alabama",
abbreviation: "AL"
},
{
name: "Alaska",
abbreviation: "AK"
},
{
name: "American Samoa",
abbreviation: "AS"
},
{
name: "Arizona",
abbreviation: "AZ"
},
{
name: "Arkansas",
abbreviation: "AR"
},
{
name: "California",
abbreviation: "CA"
},
{
name: "Colorado",
abbreviation: "CO"
},
{
name: "Connecticut",
abbreviation: "CT"
},
{
name: "Delaware",
abbreviation: "DE"
},
{
name: "District Of Columbia",
abbreviation: "DC"
},
{
name: "Federated States Of Micronesia",
abbreviation: "FM"
},
{
name: "Florida",
abbreviation: "FL"
},
{
name: "Georgia",
abbreviation: "GA"
},
{
name: "Guam",
abbreviation: "GU"
},
{
name: "Hawaii",
abbreviation: "HI"
},
{
name: "Idaho",
abbreviation: "ID"
},
{
name: "Illinois",
abbreviation: "IL"
},
{
name: "Indiana",
abbreviation: "IN"
},
{
name: "Iowa",
abbreviation: "IA"
},
{
name: "Kansas",
abbreviation: "KS"
},
{
name: "Kentucky",
abbreviation: "KY"
},
{
name: "Louisiana",
abbreviation: "LA"
},
{
name: "Maine",
abbreviation: "ME"
},
{
name: "Marshall Islands",
abbreviation: "MH"
},
{
name: "Maryland",
abbreviation: "MD"
},
{
name: "Massachusetts",
abbreviation: "MA"
},
{
name: "Michigan",
abbreviation: "MI"
},
{
name: "Minnesota",
abbreviation: "MN"
},
{
name: "Mississippi",
abbreviation: "MS"
},
{
name: "Missouri",
abbreviation: "MO"
},
{
name: "Montana",
abbreviation: "MT"
},
{
name: "Nebraska",
abbreviation: "NE"
},
{
name: "Nevada",
abbreviation: "NV"
},
{
name: "New Hampshire",
abbreviation: "NH"
},
{
name: "New Jersey",
abbreviation: "NJ"
},
{
name: "New Mexico",
abbreviation: "NM"
},
{
name: "New York",
abbreviation: "NY"
},
{
name: "North Carolina",
abbreviation: "NC"
},
{
name: "North Dakota",
abbreviation: "ND"
},
{
name: "Northern Mariana Islands",
abbreviation: "MP"
},
{
name: "Ohio",
abbreviation: "OH"
},
{
name: "Oklahoma",
abbreviation: "OK"
},
{
name: "Oregon",
abbreviation: "OR"
},
{
name: "Palau",
abbreviation: "PW"
},
{
name: "Pennsylvania",
abbreviation: "PA"
},
{
name: "Puerto Rico",
abbreviation: "PR"
},
{
name: "Rhode Island",
abbreviation: "RI"
},
{
name: "South Carolina",
abbreviation: "SC"
},
{
name: "South Dakota",
abbreviation: "SD"
},
{
name: "Tennessee",
abbreviation: "TN"
},
{
name: "Texas",
abbreviation: "TX"
},
{
name: "Utah",
abbreviation: "UT"
},
{
name: "Vermont",
abbreviation: "VT"
},
{
name: "Virgin Islands",
abbreviation: "VI"
},
{
name: "Virginia",
abbreviation: "VA"
},
{
name: "Washington",
abbreviation: "WA"
},
{
name: "West Virginia",
abbreviation: "WV"
},
{
name: "Wisconsin",
abbreviation: "WI"
},
{
name: "Wyoming",
abbreviation: "WY"
}
];
}
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<pre>Model: {{selected| json}}</pre>
<input type="text" ng-model="selected" typeahead="state.abbreviation as state.name for state in states | filter:$viewValue | limitTo:8" typeahead-input-formatter="formatLabel($model)">
</div>
</body>
</html>
I am new to use AngularJS and I am an absolute beginner. I tried using filters. I tried binding to the properties instead of directly binding the object. But the code shows {{x.people}} as the output instead of showing the list. What am I missing out here?
<!DOCTYPE html>
<html>
<head>
<title>ANGULAR APP</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<body ng-app="myApp" ng-controller="myFirstController">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in model.people">
{{ x.name }}
</li>
</ul>
</body>
<script>
var app = angular.module('myApp', []);
var myFirstController = function($scope) {
$scope.model = {
people: [{
name: 'Jani',
country: 'Norway'
},
{
name: 'Carl',
country: 'Sweden'
},
{
name: 'Margareth',
country: 'England'
},
{
name: 'Hege',
country: 'Norway'
},
{
name: 'Joe',
country: 'Denmark'
},
{
name: 'Gustav',
country: 'Sweden'
},
{
name: 'Birgit',
country: 'Denmark'
},
{
name: 'Mary',
country: 'England'
},
{
name: 'Kai',
country: 'Norway'
}
];
};
}
app.controller('myFirstController', myFirstController);
</script>
</html>
there is an unnecessary ; at the end of your json data:
$scope.model = {
people:[
... // your data
{name:'Kai',country:'Norway'}]; // <------ here the ; is illegal
};
}
refer below fixed example:
var app = angular.module('myApp', []);
var myFirstController = function($scope) {
$scope.model = {
people: [{
name: 'Jani',
country: 'Norway'
},
{
name: 'Carl',
country: 'Sweden'
},
{
name: 'Margareth',
country: 'England'
},
{
name: 'Hege',
country: 'Norway'
},
{
name: 'Joe',
country: 'Denmark'
},
{
name: 'Gustav',
country: 'Sweden'
},
{
name: 'Birgit',
country: 'Denmark'
},
{
name: 'Mary',
country: 'England'
},
{
name: 'Kai',
country: 'Norway'
}
]
};
}
app.controller('myFirstController', myFirstController);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myFirstController">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in model.people | filter: {name: test}">
{{ x.name }}
</li>
</ul>
</div>
I am trying to load an ng-grid when a button is clicked but it is not working.
But it works well on load. Why?
HTML:
Load Grid
<div ng-grid="ngOptions"></div>
$scope.ngData = [
{ Name: "Moroni", Age: 50, Position: 'PR Menager', Status: 'active', Date: '12.12.2014' },
{ Name: "Teancum", Age: 43, Position: 'CEO/CFO', Status: 'deactive', Date: '10.10.2014' },
{ Name: "Jacob", Age: 27, Position: 'UI Designer', Status: 'active', Date: '09.11.2013' },
{ Name: "Nephi", Age: 29, Position: 'Java programmer', Status: 'deactive', Date: '22.10.2014' }
];
$scope.loadGrid = funtion(){
$scope.ngOptions = { data: 'ngData' };
};
You can initialize the data with an empty array, so that ng-grid is proparly initialized, and then change the data on-click like this:
$scope.myData = [];
$scope.ngOptions = { data: 'myData' };
$scope.loadGrid = function(){
$scope.myData = [
{ Name: "Moroni", Age: 50, Position: 'PR Menager', Status: 'active', Date: '12.12.2014' },
{ Name: "Teancum", Age: 43, Position: 'CEO/CFO', Status: 'deactive', Date: '10.10.2014' },
{ Name: "Jacob", Age: 27, Position: 'UI Designer', Status: 'active', Date: '09.11.2013' },
{ Name: "Nephi", Age: 29, Position: 'Java programmer', Status: 'deactive', Date: '22.10.2014' }
];
};
Here's a working plunker
Please check this http://plnkr.co/edit/8H4NHFP59gWTxURwQKZw?p=preview
HTML :
Load Grid
<div ng-show="ngData.length">
<div ng-grid="ngOptions" ></div>
</div>
Controller
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.ngData = [];
$scope.ngOptions = {
data: 'ngData'
};
$scope.loadGrid = function() {
$scope.ngData = [
{ Name: "Moroni", Age: 50, Position: 'PR Menager', Status: 'active', Date: '12.12.2014' },
{ Name: "Teancum", Age: 43, Position: 'CEO/CFO', Status: 'deactive', Date: '10.10.2014' },
{ Name: "Jacob", Age: 27, Position: 'UI Designer', Status: 'active', Date: '09.11.2013' },
{ Name: "Nephi", Age: 29, Position: 'Java programmer', Status: 'deactive', Date: '22.10.2014' }
];
}
});
I have some data displayed in an ng-grid.
Some of this data is displayed nearly immediately after the page loads; other data is slower and we stitch it in once it's received.
In doing this, sorting can break if the grid is set to sort data that isn't there when the first half of the data is rendered in the grid.
Is there a nice way to tell the grid to re-sort itself and preserve multiple columns as well as sort directions once all of the data has been received?
JS
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 43},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{ field: "name", },
{ field: "age" },
{ field: "state" }],
sortInfo: {
fields: [ 'age', 'state' ],
directions: [ 'asc', 'desc' ]
}
};
var lateData = [
{ name: 'Moroni', state: 'NY' },
{ name: 'Tiancum', state: 'CA' },
{ name: 'Jacob', state: 'PA' },
{ name: 'Nephi', state: 'AK' },
{ name: 'Enos', state: 'MO' }
];
setTimeout(function () {
$scope.myData = _.merge($scope.myData, lateData);
$scope.$digest();
}, 3000);
});
HTML
<div ng-app="myApp">
<div ng-controller = "MyCtrl">
<div ng-grid="gridOptions" class="gridStyle"></div>
</div>
</div>
CSS
.gridStyle {
border: 1px solid rgb(212, 212, 212);
width: 100%;
height: 500px;
}
http://jsfiddle.net/akukucka/4vrQq/
Not sure if this is what you wanted:
$scope.resort= function(){
$scope.gridOptions.sortBy('age');
};
Plunker is here
Since I don't have any of your code you have to find a place where/when to do the sorting for yourself.