I don't know what cause this error: Click to see the error
I'm trying to create a dynamic web application. Do I need a local-server to run this application. Currently i'm not using any local-server.
HTML:
<div class = "body" ng-controller = "app">
<div class = "column2">
<div class = "sectionName">
<span class = "sectionName-Span">{{ page.title() }}</span>
<div class = "container">
<ng-view>Something went wrong</ng-view>
</div>
</div>
</div>
<script type=text/ng-template id=profile.html>
I'm Lalinda Sampath Dias
</script>
Controller.js:
var application = angular.module('mainApp', ['appServices'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/tab1', {templateUrl: 'profile.html', controller: HomeCtrl}).
when('/tab2', {templateUrl: 'list.html', controller: ListCtrl}).
otherwise({redirectTo: '/tab1'});
}]);
/* Controllers */
function MainCtrl($scope, Page) {
console.log(Page);
$scope.page= Page;
}
function HomeCtrl($scope, Page) {
Page.setTitle("Welcome");
}
function ListCtrl($scope, Page, Model) {
Page.setTitle("Items");
$scope.items = Model.notes();
}
function DetailCtrl($scope, Page, Model, $routeParams, $location) {
Page.setTitle("Detail");
var id = $scope.itemId = $routeParams.itemId;
$scope.item = Model.get(id);
}
function SettingsCtrl($scope, Page) {
Page.setTitle("Settings");
}
/* Services */
angular.module('appServices', [])
.factory('Page', function($rootScope){
var pageTitle = "Untitled";
return {
title:function(){
return pageTitle;
},
setTitle:function(newTitle){
pageTitle = newTitle;
}
}
})
.factory ('Model', function () {
var data = [
{id:0, title:'Doh', detail:"A dear. A female dear."},
{id:1, title:'Re', detail:"A drop of golden sun."},
{id:2, title:'Me', detail:"A name I call myself."},
{id:3, title:'Fa', detail:"A long, long way to run."},
{id:4, title:'So', detail:"A needle pulling thread."},
{id:5, title:'La', detail:"A note to follow So."},
{id:6, title:'Tee', detail:"A drink with jam and bread."}
];
return {
notes:function () {
return data;
},
get:function(id){
return data[id];
},
add:function (note) {
var currentIndex = data.length;
data.push({
id:currentIndex, title:note.title, detail:note.detail
});
},
delete:function (id) {
var oldNotes = data;
data = [];
angular.forEach(oldNotes, function (note) {
if (note.id !== id) data.push(note);
});
}
}
});
Edit:
<body ng-app = "mainApp">
<div id = "background-div">
<div class = "header">
<div class = "ham-icon">
<img src = "images/ham-icon.png">
</div>
<div class = "logo">
<span class = "google-logo">Lalinda</span><span class = "hangouts-logo"> Sampath</span>
</div>
<div class = "profile-data">
</div>
</div>
<div class = "body" ng-controller = "app">
<div class = "column1">
<div class = "tab1">
<img src = "images/people-icon.png">
</div>
<div class = "tab2">
<img src = "images/chat-icon.png">
</div>
<div class = "tab3">
<img src = "images/phone-icon.png">
</div>
<div class = "tab4">
<img src = "images/other-icon.png">
</div>
</div>
<div class = "column2">
<div class = "sectionName">
<span class = "sectionName-Span">{{ page.title() }}</span>
<div class = "container">
<ng-view>Something went wrong</ng-view>
<!--input type = "text" ng-model = "name"-->
</div>
</div>
</div>
<script type=text/ng-template id=profile.html>
I'm Lalinda Sampath Dias
</script>
<div class = "column3">
<div classs = "user-greet">
<span class = "user-greet-span">Hi, Guest</span>
</div>
<div class = "det">
<span class = "det-span">Get started by calling or messaging a friend below</span>
</div>
<div class = "functional-area">
<div class = "video-call">
</div>
<div class = "phone-call">
</div>
<div class = "message">
</div>
</div>
</div>
</div>
</div>
</body>
You need to add ngRoute as depencies like this
var application = angular.module('mainApp', ['ngRoute','appServices'])
Figured out an answer by my-self. When adding ngRoute as a dependency we have to load ngRoute.js file. You can download it from the internet.
Here is the Google CDN:
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js
Related
I have articles listed on a page in my app, where I have an iframe and overlay over that iframe. I want to have it that when a user clicks on an iframe overlay, that the title from that article gets hidden. Not sure how to achieve that in ng-repeat. This the code, where as of now, on a click event titles of all articles get hidden.
<ion-item ng-repeat="article in articles" class="item-light">
<div class="article">
<a ng-show="article.external_media.length == 0 || article.external_media.url == ''" href="#/main/article/{{article.id}}" nav-direction="forward" class="article-image-link">
<img src="{{ fileServer }}/imagecache/cover/{{article.cover_image}}">
<h1>{{ article.title.split(' ', 7).join(' ') }}</h1>
</a>
<div class="iframe" ng-show="article.external_media.length > 0 && article.external_media.url != ''">
<iframe ng-src="{{article.external_media[0].url | safeUrl }} "></iframe>
<div class="article-image-link">
<h1 ng-hide="videoPlaying">{{ article.title.split(' ', 7).join(' ') }}</h1>
</div>
<div class="iframe-overlay" ng-click="playVideo()"></div>
</div>
</div>
</ion-item>
Controller:
$scope.playVideo = function(videoSrc) {
$scope.videoPlaying = true;
$scope.videoSrc = videoSrc + "&autoplay=1";
};
you can also use $index for this purpose.
controller
app.controller('someController',function($scope){
$scope.videoPlaying = [];
$scope.playVideo = function(videoSrc,index) {
$scope.videoPlaying[index] = true;
$scope.videoSrc = videoSrc + "&autoplay=1";
};
$scope.stopVideo = function(videoSrc,index) {
$scope.videoPlaying[index] = false;
$scope.videoSrc = videoSrc + "&autoplay=1";
};
})
HTML
i am changing only two lines rest are same as it is
<h1 ng-hide="videoPlaying[$index]">{{ article.title.split(' ', 7).join(' ') }}</h1>
<div class="iframe-overlay" ng-click="playVideo($index)"></div>
I've created a JSFIDDLE (basic) to give you a head start on what you are trying to do.
VIEW
<div ng-app="app">
<div ng-controller="helloCnt">
<div ng-repeat='item in data'>
<span ng-if="item.hide === undefined || !item.hide">{{item.name}}</span>
<div ng-if="!item.hide" ng-click="playVideo(item)">
HIDE
</div>
<div ng-if="item.hide" ng-click="stopVideo(item)">
SHOW
</div>
<br/>
</div>
</div>
</div>
CONTROLLER
var app = angular.module('app', [])
app.controller('helloCnt', function($scope) {
$scope.data = [{
'name': 'test'
}, {
'name': 'in'
}, {
'name': 'dummy'
}, {
'name': 'data'
}]
$scope.playVideo = function(item, videoSrc) {
// other code
item.hide = true;
};
$scope.stopVideo = function(item, videoSrc) {
// other code
item.hide = false;
};
})
SEE JSFIDDLE
I'm trying to include subpages to my main page..
I'm using ng-include.. when I tried to put using this ng-include="'samplePage.php'" it works... but what I want is to assign the value of ng-include in the controller...
here's my hmtl code
<div id="navbar-override" class = "navbar navbar-inverse navbar-static-top" ng-controller="indexCtrl">
<div class = "container">
<div class = "navbar-header">
<a href = "index.html" class = "navbar-brand">
Sample App
</a>
<button id="navbar-btn-override" class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
</div>
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li ng-repeat="link in Links" ng-class="{'active': selectedItem === link}">
{{ link }}
</li>
</ul>
</div>
</div>
</div>
<div class="container" ng-include="pages">
<!--subpages will append here-->
</div>
my controller.js
indexApp.controller('indexCtrl', ['$window','$scope', '$http', function($window, $scope, $http) {
$scope.pages = "./pages/customer.php";
}]);
if you ask me why I do this.. because I'm planing to use ng-include dynamically......
I'm still new to angularjs so bear with me...
thanks in advance..
This will work,
Your HTML :
<div ng-controller="Ctrl">
<select ng-model="template" ng-options="t.name for t in templates">
<option value="">(blank)</option>
</select>
url of the template: <tt>{{template.url}}</tt>
<hr/>
<div ng-include src="template.url" onload='myFunction()'></div>
</div>
<!-- template1.php-->
<script type="text/ng-template" id="./pages/template1.php">
Content of template1.php
</script>
<!-- template2.php-->
<script type="text/ng-template" id="./pages/template2.php">
<p ng-class="color">Content of template2.php</p>
</script>
Controller :
function Ctrl($scope) {
$scope.templates = [{
name: 'template1.php',
url: './pages/template1.php'},
{
name: 'template2.php',
url: './pages/template2.php'}];
$scope.template = $scope.templates[0];
$scope.myFunction = function() {
$scope.color = 'red';
}
}
http://jsfiddle.net/MfHa6/1517/
Ive tried to use this with the current view scope and also by adding its own controller. No success in clearing all fields on cancel button click. All I need is to clear the fields.
Here is my in my controller modal :
var myApp = angular.module('starter.controllers');
function TalkSearchPageCtrl($scope, TalkSearch, $ionicModal) {
var nextPageNum = 1;
$scope.noMoreItemsAvailable = false;
var nextPageNum = 1;
$scope.loadMore = function() {
TalkSearch.getList(nextPageNum, {
}, $scope.idsToExclude, $scope.backResult).success(function(items) {
if (typeof(items.idsToExclude) !== undefined) {
$scope.idsToExclude = items.idsToExclude;
$scope.backResult = true;
} else {
$scope.idsToExclude = undefined;
$scope.backResult = undefined;
}
// error check when it's not loading
if (items.talks.length != 0) {
i = 0;
while (i != items.talks.length - 1) {
$scope.talks.push(items.talks[i]);
i++;
}
nextPageNum++;
} else {
$scope.noMoreItemsAvailable = true;
}
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
$scope.talks = [];
$scope.categories = [
];
$scope.checkedCategories = [];
$scope.toggleCheck = function(category) {
if ($scope.checkedCategories.indexOf(category) === -1) {
$scope.checkedCategories.push(category);
} else {
$scope.checkedCategories.splice($scope.checkedCategories.indexOf(category), 1);
}
};
$scope.getValues = function(filter) {
console.log(filter);
if (filter.length || filter !== undefined) {
$scope.userFilter = {};
$scope.userFilter.categories = [];
$scope.userFilter.filters = {};
$scope.userFilter.filters = angular.copy(filter);
var categories = $scope.checkedCategories;
$scope.userFilter.categories = categories;
getFiltersService.filter = angular.copy(filter);
console.log($scope.userFilter);
// console.log(getFiltersService.filter);
}
};
$scope.reset = function() {
console.log($scope.userFilter);
// $scope.modal.hide();
// $scope.userFilter.filters = null;
// $scope.userFilter.categories = null;
// $scope.userFilter = {};
console.log($scope.userFilter);
};
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
}
myApp.controller('TalkSearchPageCtrl', ['$scope', 'TalkSearch', '$ionicModal', TalkSearchPageCtrl]);
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
Here is my html script template :
<script id="my-modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="bar bar-header schoolinkscolor headerSection" ng-controller="TalkFilterPageCtrl">
<div class="row padding0">
<div class="col">
<div class="button button-white closeModal" side="right" ng-click="reset(talkfilter);hideButton=false;showDetails=false;"><span>Cancel</span></div>
</div>
<div class="col">
<div class="light headerTitle"><span class="light">Schoo</span><span class="color-black">Links</span></div>
</div>
<div class="col">
<div class="button button-white searchButton" side="left"><span>Search</span></div>
</div>
</div>
</ion-header-bar>
<ion-content class="has-header">
<div class="talkFilterContainer">
<section>
<div class="col padding0">
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="talkfilter.searchTalk" ng-change="getValues(talkfilter)" ng-model-options="{ debounce: 1000 }">
</label>
</div>
</div>
</section>
<div class="row padding clearboth"></div>
<section>
<div class="list padding">
<label class="item item-input item-select">
<div class="input-label">
Language:
</div>
<select ng-options="author for author in ['Mandarin','Spanish','Portuguese']" ng-model="talkfilter.selectLanguage" ng-init="author = 'Select Preferred Language'" ng-change="getValues(talkfilter)">
<option value="">Select Preferred Language</option>
</select>
</label>
</div>
</section>
<div class="row padding clearboth"></div>
<section>
<div class="list padding">
<label class="item item-input item-select">
<div class="input-label">
Author Type:
</div>
<select ng-options="author for author in ['Consultant','School','Student']" ng-model="talkfilter.authorType" ng-init="author = 'Select By Author Type'" ng-change="getValues(talkfilter)">
<option value="">Select By Author Type</option>
</select>
</label>
</div>
</section>
<div class="row padding clearboth"></div>
<section class="padding">
<ion-list>
<ion-item ng-repeat="category in categories track by $index" ng-class="{ 'hidden': ! showDetails && $index > 2}">
<ion-checkbox value="{{category}}" ng-model="$index" ng-click="toggleCheck(category); getValues(talkfilter)">{{category}}</ion-checkbox>
</ion-item>
</ion-list>
<div class="row">
<button class="button button-full button-clear" ng-click="showDetails = ! showDetails;hideButton=true" ng-show="!hideButton">See All Categories</button>
</div>
</section>
</div>
</ion-content>
</ion-modal-view>
Here is my reset function:
var Talk = this;
Talk.reset = function(filter) {
console.log(filter);
filter = null;
};
Also tried with $scope :
$scope.reset = function(filter) {
console.log(filter);
filter = null;
};
***Update:
$scope.reset = function(filter) {
$scope.userFilter = null; //does not work. none of these variations work.
$scope.userFilter = '';
};
Both of these methods return undefined. But if i put the button in the body it clears the fields. I need the button in the header.
Also tried inlining the reset with:
<button ng-click="talkfilter=null"></button>
The problem is that you are not passing anything in the filter function with the ng-click, because your $scope.userfilter is not defined throughout the controller.
Adding $scope.userFilter = {} like you have done inside of getValues, outside of that function should give you the desired result if you do your reset function like so....
function TalkSearchPageCtrl($scope, TalkSearch, $ionicModal) {
$scope.userFilter = {};
...
$scope.reset = function(filter) {
console.log(filter); \\Make sure this is the object
$scope.userFilter = null; \\Set it to null or {}
}`
Why I can't change value using function? AngularJS
html:
<div ng-controler='TestCtrl' id='TestCtrl'>
<h1>Test: {{test.name}}</h1>
<div ng-hide='showTest'>
<div class='content'>
<p>First name: <input ng-model='firstName'></p>
<p>Last name: <input ng-model='lastName'></p>
</div>
<div jq-ui-button ng-click='doSth()'>
Do something
</div>
</div>
</div>
JS:
app.controller('TestCtrl', function ($scope) {
$scope.showTest = false;
$scope.test = {name:'Test name'};
$scope.doSth = function() {
$scope.showTest = true;
}
}
It does not work. But when I write:
<div jq-ui-button ng-click='showTest = true'>
It works.
Where is the problem?
You must write ng-controller not ng-controler. That's why your code is not used. First line in your HTML.
i am very new to angular.
i am reading a JSONP response and showing it in a page. i would like to allow users to edit parts of the text inline. i found angular-xeditable. but i cant figure out
1. how do i use it in the repeater. i have spent several hours trying to use the inline edit. it works if its not in the repeater. otherwise breaks everything.
i have this:
in my app.js:
var app = angular.module('ListApp', ['ui.bootstrap']).config(['$httpProvider', function ($httpProvider)
{
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);;
var app11 = angular.module("app11", ["xeditable"]);
app11.run(function (editableOptions) {
editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
});
app11.controller('Ctrl', function ($scope) {
$scope.user = {
name: 'awesome user'
};
});
angular.element(document).ready(function () {
angular.bootstrap(document.getElementById('list-reminders'), ['ListApp']);
angular.bootstrap(document.getElementById('xedittxt'), ['app11']);
});
in my html:
<div id="list-reminders" class="container main-frame" ng-controller="remindersController" ng-init="init()">
<div class="search-box row-fluid form-inline">
<nobr>
<label>Find</label>
<input type="text" ng-model="searchText" value="{{searchText}}" /> <input type="submit" class="submit" ng-click="getRemindersByUserId()" value="Search">
</nobr>
</div>
<div class="results-top"></div>
<div class="results-container">
<div class="row-fluid">
<div class="span1">Title</div>
<div class="span2">My Notes</div>
</div>
<ul class="item-list" style="display:none;">
<li ng-repeat="(key,item) in lists">
<div class=" row-fluid">
<div id="xedittxt" ng-controller="Ctrl" class="span2">
</div>
<div class="span2">{{item.user_notes}} </div>
</div>
</li>
</ul>
in my controller.js
app.controller("remindersController", function ($scope, $modal, $http) {
$scope.items = [];
//api
$scope.getListApi = '....URL REMOVED';
var callback = 'callback=JSON_CALLBACK';
$scope.init = function () {
//items selected from results to add to list
$scope.selectedItems = [];
var $loading = $('.loading');
var $searchOptions = $('.search-options');
var $itemList = $('.item-list');
$scope.getRemindersByUserId = function (userId) {
$itemList.hide();
$loading.show();
var getListUrl = $scope.getListApi + "1&" + callback;
console.log(getListUrl);
$http.jsonp(getListUrl).success(function (data) {
$scope.lists = data;
$loading.hide();
$itemList.show();
}).error(function (err) {
console.log("getRemindersByUserId error: " + err);
});
};
};
});