I'm having a problem with a button inside a list. The list is being built with ng-repeat. I'm trying to create a simple web app for creating tasks. Given the following code,
I can't click the button which is supposed to show the task description (the one with the gear). Thank you in advance.
HTML:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tasks List</title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="todo" ng-controller='mainCtrl'>
<ion-pane>
<ion-header-bar class="bar-dark">
<h1 class="title">Tasks</h1>
</ion-header-bar>
<ion-content>
<div class="list list-inset">
<label class="item item-input">
<input type="text" name="list" placeholder="Task Name" ng-model="task">
</label>
<label class="item item-input">
<input type="text" placeholder="Description" ng-model="description">
</label>
</div>
<button class ="button button-dark right" ng-click="add(task,description)">Add</button>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col col-50">
<ion-list show-delete="1==1" ng-repeat="task in tasks">
<ion-item>
{{task.taskname}}
<ion-delete-button class="ion-minus-circled" ng-click="delete(task)"></ion-delete-button>
<button ng-click="task.selected=!task.selected" class="btn button icon ion-gear-a"></button>
</ion-item>
<div class="item item-divider" ng-show="task.selected">
{{task.description}}
</div>
</ion-list>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
app.js:
angular.module('todo', ['ionic'])
.controller('mainCtrl',function($scope, $ionicModal){
$scope.tasks=[
{
taskname: 'Hi',
description:'I am a description',
selected: false
},
{
taskname:'Hello',
description:'I am another description',
selected: false
},
{
taskname: '123',
description:'I am another description',
selected: false
},
{
taskname: '456',
description:'I am another description',
selected: false
},
{
taskname: '789',
description:'I am another description',
selected: false
},
]
$scope.select=-1;
$scope.add=function(task,description){
if ($scope.tasks.indexOf(task)!== -1){
this.list="Already exists!"
}
else{
newtask={
taskname: task,
description: description,
selected: false
};
$scope.tasks.push(newtask);
}
};
$scope.delete=function(task){
var index = $scope.tasks.indexOf(task);
$scope.tasks.splice(index, 1);
}
});
Your controller line should be:
.controller('mainCtrl', ['$scope', '$ionicModal', function($scope, $ionicModal) {
And obviously the extra ] at the end.
I removed the ios-list and ion-item tags and replace them with the ul and li ones and it worked perfectly, is there something wrong with those tags?
Related
I can not create complex data models in my controllers.
every time I create them the code seems to fail silently
simple data models like
$scope.conversationList = [123456];
work just fine both using ng-bind & using it in a directive template.
but the moment I change them to {{conversationList.conversation}} they fail silently and my ngbind is emptied and the template displays
"{{conversationList.conversataion}}" in plain text.
I don't know what is wrong. Every example I can find looks like I formatted the models correctly it keeps failing.
Thank you for your help
Controller
/* global angular */
'use strict';
app.controller('conversationListCtrl', ['$scope', function ($scope) {
$scope.conversationList = [
{
conversation2: 123456789,
conversation:
{
id: "bestbuy",
messageId: 123456,
subscriber: "Billy Madison",
subscriptionType: "summerPass",
conversationImage: "insert Image"
}
}
]
}
])
.directive('listCtrl', function () {
return {
scope: false,
template: '<div> {{conversationList.conversation}} </div>'
}
});
Index.html
<!doctype html>
<html ng-app="ChatApp" class="angularjs ng-scope">
<head>
<meta charset="utf-8">
<title>ClearKey Test Message</title>
<meta name="description" content="Layer Angular example">
<link rel="shortcut icon" href="http://static.layer.com/web/favicon.png">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet" type="text/css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Common CSS and Identity dialog -->
<link href="common/style.css" rel="stylesheet">
<!-- Layer Web SDK -->
<script src='vendors/layer-websdk.min.js'></script>
<script src='vendors/angular.js'>
//checked
</script>
<script src='vendors/angular-route.js'>
</script>
<script src='vendors/ng-infinite-scroll.min.js'></script>
<script src='vendors/stop-angular-overrides.js'></script>
<!-- Angular app -->
<script src='js/app.js'></script>
<script src="jquery-3.1.1.min.js"></script>
<script src="js/models/conversation.js"></script>
</head>
<body class="ng-scope" cz-shortcut-listen="true">
<!-- ^^^used to have appCtrl^^^ -->
<div class="main-app" ng-include="'views/app.html'"></div>
</body>
</html>
App.html
<div src="jquery-3.1.1.min.js">
<!-- ^^^needs appctrl controller^^^ -->
<div class="messenger">
<div class="left-panel">
<div class="Message-item">
<div class="imgContainer"> <img class="cornerImage" src="images/favicon.png" /> </div>
</div>
<div >
<!-- ^^^had the conversationListCtrl^^^ -->
<div class="panel-header conversations-header"
>
<!-- ^^^had the partials for the left column header^^^ -->
</div>
<div ng-controller="conversationListCtrl" class="conversation-list">
<div list-Ctrl ></div>
<div ng-model="conversationList" class="conversation-list" style="border:dashed" ng-bind="{{conversationList.conversation}}"></div>
</div>
<!-- had the partials for conversationlist.html -->
</div>
</div>
<div class="right-panel" >
<div
>
<!-- had the partials for the messages that were in each conversation -->
</div>
</div>
</div>
</div>
You need to define element which you want to access -
Replace - {{conversationList.conversation}}
With - {{conversationList.conversation.id}} or {{conversationList.conversation.messageId}}
AngularJS controller not a function in IBM MobileFirst is what I am getting an error. I went through many similar questions being ask on Stack Overflow but nothing helped me.
Error Print Screen
// **************** app.js ***************
var app = angular.module('myApp',['ui.router']);
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login',{
url:'/login',
templateUrl:'view/login.html',
controller:'loginController'
});
});
// **************** login.js ***************
app.controller('loginController',function($scope){
$scope.login = function(){
$scope.userName = angular.element('#usrName').val();
$scope.password = angular.element('#pass').val();
console.log($scope.userName, $scope.password);
$scope.loginProcedure ={
procedure:'login',
adaptor:'SQL',
parameters:[$scope.userName, $scope.password]
};
WL.Client.invokeProcedure($scope.loginProcedure, function(){
onSuccess: loginSuccess,
onFailure: loginFailure
});
$scope.loginSuccess = function()
{
alert('success');
};
$scope.loginFailure = function()
{
alert('failed');
};
}
});
<!-- INDEX.html -->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>AB</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!--
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
-->
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body ng-app="myApp">
<!--application UI goes here-->
<div id="view" ui-view></div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
<script src="library/jquery.min.js"></script>
<script src="library/angular.1.4.9.js"></script>
<script src="library/angular-ui-router.min.js"></script>
<script src="library/bootstrap.min.js"></script>
<script src="controller/app.js"></script>
<script src="controller/login.js"></script>
</body>
</html>
<!-- Login.html -->
<div ng-controller="loginController" class="col-xs-12 col-sm-6 col-md-4 center-block" id="lgBlock">
<!-- Login Box Start -->
<div class="panel panel-primary">
<div class="panel-heading">Login</div>
<div class="panel-body">
<form class="form-group" name="lgForm">
<input type="text" class="form-control" id="usrName" ng-modal="usrName" required />
<input type="password" class="form-control" id="pass" ng-modal="pass" required />
<input type="submit" class="btn btn-primary btn-block" id="submit" value="Login" ng-click="login()" />
</form>
</div>
</div>
<!-- Login Box End -->
<!-- error Modal start -->
<div class="modal" role="modal" id="errorPopup">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Error</div>
<div class="modal-body"></div>
</div>
</div>
</div>
<!-- error Modal End -->
</div>
You are specifying loginController in your html as well as in your route configuration. I'm not certain that this is the cause of the problem, but doing both is unnecessary. Remove one of them.
In other words, eliminate controller: 'loginController' from below
$stateProvider
.state('login',{
url:'/login',
templateUrl:'view/login.html',
controller:'loginController'
});
or eliminate: ng-controller="loginController" from:
<div ng-controller="loginController" class="col-xs-12 col-sm-6 col-md-4 center-block" id="lgBlock">
Also, unrelated, but I doubt that these two lines:
$scope.userName = angular.element('#usrName').val();
$scope.password = angular.element('#pass').val();
do what you think. The purpose of angular.element is to wrap elements as jquery elements. I suspect you want to use document.getElementById here to get references to the items. However, you're using ngModel here, so none of this should be necessary if you use consistent spelling. (In one place you have userName and in another usrName.)
issue was wrong spelling of adapter
/* wrong one */
$scope.loginProcedure ={
procedure:'login',
adaptor:'SQL',
parameters:[$scope.userName, $scope.password]
};
/*write one */
$scope.loginProcedure ={
procedure:'login',
adapter:'SQL',
parameters:[$scope.userName, $scope.password]
};
I'm trying to make this plunker Ui-grid cell template working on most browsers, but it fails in IE 11.
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script data-require="ui-bootstrap#0.12.1" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.20/ui-grid.js"></script>
<link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.20/ui-grid.min.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
Data.json
[
{
"jobId": "1",
"loaded": 15000,
"error":6000,
"priced":5000
},
{
"jobId": "2",
"loaded": 15000,
"error":6000,
"priced":8000
}
]
statusTemplate.html
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:{{ (row.entity.priced/row.entity.loaded)*100|number:2}}% ;">
{{ (row.entity.priced/row.entity.loaded)*100|number:2}}%
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width:{{ ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100|number:2}}% ;">
{{ ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100|number:2}}%
</div>
<div class="progress-bar progress-bar-danger" style="width:{{ (row.entity.error/row.entity.loaded) *100|number:2}}% ;">
{{ (row.entity.error/row.entity.loaded) *100|number:2}}%
</div>
</div>
app.js
var app = angular.module('app', ['ui.grid', 'ui.bootstrap']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
columnDefs: [
{ name: 'jobId' },
{ name: 'status', cellTemplate: 'statusTemplate.html' }
]
};
$http.get('data.json')
.success(function (data) {
$scope.gridOptions.data = data;
});
}])
;
Any explanation is very appreciated
Update
This works on Firefox, Safari and Chrome
One of the problems that you may be getting is the Access denied. That happens when a script tried to access data from a source other than the host of the current page. Check this link: https://msdn.microsoft.com/library/dn887953(v=vs.94).aspx. Check this link on how to disable Disable same origin policy Internet Explorer.
Also, you should use ng-style instead of style only.
Here's a plunkr http://plnkr.co/edit/X2SROdoYsUJ1MKwkbNUQ?p=preview
<div class="progress">
<div class="progress-bar progress-bar-success" ng-style="{'width': (row.entity.priced/row.entity.loaded)*100 + '%' }">
{{(row.entity.priced/row.entity.loaded)*100|number:2}}%
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" ng-style="{'width': ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100 + '%' }">
{{ ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100|number:2}}%
</div>
<div class="progress-bar progress-bar-danger" ng-style="{'width': ((row.entity.error/row.entity.loaded)*100) + '%' }">
{{ (row.entity.error/row.entity.loaded) *100|number:2}}%
</div>
</div>
I am trying to add directive in angular and use the same to display the values. However the values are not getting displayed.
My html code
<!doctype html>
<html>
<head>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700italic|Oswald' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
<script src="js/vendor/angular.min.js"></script>
</head>
<body ng-app="PizzaPlanetApp">
<div class="header" >
<h1><span>Pizza</span><span>Planet</span></h1>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<h1>Specials for {{ today | date }}</h1>
<h2>Appetizers</h2>
<div ng-repeat="appetizer in appetizers">
<div class="item col-md-9">
<pizza-info info=appetizer> </pizza-info>
</div>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
<!--directives-->
<script src="js/directives/pizzaInfo.js"></script>
</body>
</html>
Controller
app.controller('MainController', ['$scope', function($scope) {
$scope.today = new Date();
$scope.appetizers = [
{
name: 'Caprese',
description: 'Mozzarella, tomatoes, basil, balsmaic glaze.',
price: 4.95
},
{
name: 'Mozzarella Sticks',
description: 'Served with marinara sauce.',
price: 3.95
},
{
name: 'Bruschetta',
description: 'Grilled bread garlic, tomatoes, olive oil.',
price: 4.95
}
];
}]);
Directive(pizzaInfo.js)
app.directive('pizzaInfo', function(){
return {
restirct:'E',
scope:{
info:'='
},
templateUrl: 'js/directives/pizzaInfo.html'
};
});
Directive html(pizzaInfo.html)
<h3 >{{info.name}} </h3>
<p > {{info.description}}</p>
<p >{{info.price | currency}} </p>
I am not getting any error in the console.log. What is that i am missing here?
Syntax Error :))
app.directive('pizzaInfo', function(){
return {
/****/restrict:'E',
scope:{
info:'='
},
templateUrl: 'js/directives/pizzaInfo.html'
};
});
I'm having a weird angularjs binding problem
<a class="navbar-brand" href="#">Application (Environment: {{ globalConfig.environment + ""}})</a>
That will work, and render the value "dev"
<a class="navbar-brand" href="#">Application (Environment: {{ globalConfig.environment }})</a>
This doesn't render anything.
<a class="navbar-brand" href="#">Application (Environment: <span ng-bind="globalConfig.environment"></span>)</a>
This last example works.
Any ideas why the second example won't render out the value "dev"?
The controller is as follows:
angular.module('uppApp').controller('globalController', function ($scope) {
$scope.globalConfig = {
environment: 'dev'
};
});
the html looks as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="uppApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Pixel Pimp Web UI</title>
<link href="assets/css/style.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/thirdparty/ie8mediasupport.js"></script>
<![endif]-->
</head>
<body ng-controller="globalController">
<div class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Pixel Pimp (Environment: <span ng-bind="globalConfig.environment"></span>)</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li>Pixel Groups</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<h1>Dashboard</h1>
<div id="myfirstchart" style="height: 250px;"></div>
</div><!-- /.container -->
<script src="assets/thirdparty/built.js"></script>
<script src="assets/js/uppangular.js"></script>
<script>
$(function () { genGraph(); });
function genGraph() {
new Morris.Line({
// ID of the element in which to draw the chart.
element: 'myfirstchart',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [
{ year: '2008', value: 20 },
{ year: '2009', value: 10 },
{ year: '2010', value: 5 },
{ year: '2011', value: 5 },
{ year: '2012', value: 20 }
],
// The name of the data record attribute that contains x-values.
xkey: 'year',
// A list of names of data record attributes that contain y-values.
ykeys: ['value'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Value']
});
}
</script>
</body>
</html>
UPDATE
When i wrap the decorate the interpolate service for debugging like this:
app.config(function($provide){
$provide.decorator("$interpolate", function($delegate){
var interpolateWrap = function(){
var interpolationFn = $delegate.apply(this, arguments);
if(interpolationFn) {
return interpolationFnWrap(interpolationFn, arguments);
}
};
var interpolationFnWrap = function(interpolationFn, interpolationArgs){
return function(){
var result = interpolationFn.apply(this, arguments);
var log = result ? console.log : console.warn;
log.call(console, "interpolation of " + interpolationArgs[0].trim(),
":", result.trim());
return result;
};
};
angular.extend(interpolateWrap, $delegate);
return interpolateWrap;
});
});
The console log will show:
interpolation of {{globalConfig.environment+""}} : dev
However for the binding of {{globalConfig.environment}} nothing shows up in the console window.
Ok I figured it out. I'm using grunt bake for the first time, and I think grunt bake, is stripping out the {{globalConfig.environment}} code from the rendered file.
Sorry. Stupid mistake.
UPDATE
Ultimately I fixed it by modifying the BAKE parse pattern to use [{ }] instead of {{ }}
bake: {
build: {
options: {
parsePattern: '/\[\{\s?([\.\-\w]*)\s?\}\]/g'
},
files: {
"app/index.html": "app/base.html"
}
}
},