This is my code
location: {
address: 'Google Headquarters',
city: 'Mountain View',
province: 'CA'
},
imageUrl: "img/angularjs-logo.png",
sessions: [
{
name: 'Directives Masterclass',
creatorName: 'Bob Smith',
duration: '1 hr',
level: 'Advanced',
abstract: 'In this sesison you will learn the ins and outs of directives!',
upVoteCount: 0
},
The image is not showing , this is the conroller.js, im using AngularJS v1.2.10.
<div ng-controller="EventController" style="padding-left:20px; padding-right:20px">
<img ng-src="{{event.imageUrl}}" alt="{{event.name}}" />
Maybe there is difference ways to show it , i dont get a error. I saw a toturial online and it does it the same way.
can anyone tell me what im doing wrong?
What you are supposed to have is the event variable in the scope of your controller to make it work:
Your controller:
app.controller('MainCtrl', function($scope) {
$scope.event = { location: {
address: 'Google Headquarters',
city: 'Mountain View',
province: 'CA'
},
title: "some title",
imageUrl: "http://plnkr.co/img/plunker.png",
sessions: [
{
name: 'Directives Masterclass',
creatorName: 'Bob Smith',
duration: '1 hr',
level: 'Advanced',
abstract: 'In this sesison you will learn the ins and outs of directives!',
upVoteCount: 0
},
]};
});
Your html:
<body ng-controller="MainCtrl">
<p><img ng-src="{{event.imageUrl}}" title="{{event.title}}" /></p>
</body>
Related
I am using angular 1.6.4 and node 6.1 and I am trying to load a simple array that I have specified in the player-main component to the template but it does not get loaded correctly.
angular.
module('player').
component('playerMain', {
templateUrl: '/player.php',
controller: function PlayListController() {
this.songs = [
{
id: 'one',
title: 'Rain',
artist: 'Drake',
url: 'http://www.schillmania.com/projects/soundmanager2/demo/_mp3/rain.mp3'
},
{
id: 'two',
title: 'Walking',
artist: 'Nicki Minaj',
url: 'http://www.schillmania.com/projects/soundmanager2/demo/_mp3/walking.mp3'
},
{
id: 'three',
title: 'Barrlping with Carl (featureblend.com)',
artist: 'Akon',
url: 'http://www.freshly-ground.com/misc/music/carl-3-barlp.mp3'
},
{
id: 'four',
title: 'Angry cow sound?',
artist: 'A Cow',
url: 'http://www.freshly-ground.com/data/audio/binaural/Mak.mp3'
},
{
id: 'five',
title: 'Things that open, close and roll',
artist: 'Someone',
url: 'http://www.freshly-ground.com/data/audio/binaural/Things%20that%20open,%20close%20and%20roll.mp3'
}
];
}
});
When the template url is called 'player.php' express router redirects it to following jade template.
.container
.row
.col-md-12
h5 Songs
ul
li(ng-repeat='song in $ctrl.songs')
button(music-player='play', add-song='song') {( song.title )}
button(music-player='', add-song='song') +
button(play-all='songs') Play all
button(play-all='songs', data-play='false') Add all
hr
But even though ng-repeat does iterate over the array 5 times, the
{(song.title)}
does not get evaluated, it simply print it as a string.
I have tried to research this issue and have had no luck. My ng-repeat doesn't display dynamic content from the controller on the first try. I was told to use a .digest or apply to get angular to hit my page again but I am not quite clear how to implement. From the examples I saw online this should work
var shopItems = angular.module('shopItems', []);
var trophyEarns = angular.module('trophyEarns', []);
var app = angular.module('app', ['shopItems', 'trophyEarns']);
shopItems.controller('shopItemController', function ($scope) {
$scope.shopItems = [{
//id: 01,
name: 'One',
//img: '',
price: '$3.99',
altprice: '1 mile',
desc: 'This is a fake description.',
prog: '50%'
},{
//id: 02,
name: 'Two',
//img: '',
price: '$3.99',
altprice: '1 mile',
desc: 'This is a fake description.',
prog: '50%'
}];
$scope.$apply();
});
trophyEarns.controller('trophyEarnsController', function ($scope) {
$scope.trophyEarns = [{
//id: 01,
name: 'One',
//img: '',
price: '$3.99',
altprice: '1 mile',
desc: 'This is a fake description.',
prog: '50%'
},{
//id: 02,
name: 'Two',
//img: '',
price: '$3.99',
altprice: '1 mile',
desc: 'This is a fake description.',
prog: '50%'
}];
$scope.$apply();
});
Here is a snippet of the html and controller
<div ng-app="app">
<div ng-controller="shopItemController">
<div class="itm" ng-repeat="shopItem in shopItems">
<div class="imag"></div>
<h2>{{ shopItem.name }}</h2>
<div class="hff">Earn it: {{ shopItem.altprice }}</div>
<div class="hf">Buy it: {{ shopItem.price }}</div>
<div class="desc"><div>{{ shopItem.desc }}</div></div>
<div class="prog"><div>{{ shopItem.progress }}</div></div>
</div>
</div>
</div>
But this does nothing and no errors pop up. I am still forced to reload every time I leave and go back to the pages with the controllers to see the dynamic content. Am I using this correctly? Is digest better?
I have a form that displays dropdown select boxes for states and counties, everything it working ok, except when I choose a state with a single digit, say the number "1" the filter will include the other states that also have number "1" in them. I need to filter exactly or "true" but not sure how the code should look for that, I'm still learning Angular.
Here's my Javascript:
var app = angular.module('app', []);
app.controller('myController', function($scope) {
$scope.projects = [{
name: 'First thing',
state: 'CA',
stateID: '1',
county: 'Orange',
countyID: '191'
}, {
name: 'Another Thing',
state: 'CA',
stateID: '1',
county: 'LosAngeles',
countyID: '190'
}, {
name: 'In California',
state: 'CA',
stateID: '1',
county: 'Orange',
countyID: '191'
}, {
name: 'Hey Arizona!',
state: 'Arizona',
stateID: '13',
county: 'Multiple Counties',
countyID: '3178'
},{
name: 'hello Utah',
state: 'Utah',
stateID: '14',
county: 'Utah County',
countyID: '200'
}];
$scope.st_option = [{
state: "California",
stateID: "1"
}, {
state: "Arizona",
stateID: "13"
},{
state: "Utah",
stateID: "14"
}];
$scope.co_option = [{
county: "Orange",
countyID: "191",
co_state_id: "1"
}, {
county: "Multiple Counties",
countyID: "3178",
co_state_id: "13"
}, {
county: "Sonoma",
countyID: "218",
co_state_id: "1"
}, {
county: "Los Angeles",
countyID: "190",
co_state_id: "1"
}, {
county: "Utah County",
countyID: "200",
co_state_id: "14"
}];
$scope.filter = {};
$scope.clearFilter = function() {
$scope.filter = {};
};
});
And the View:
<div ng-app='app' ng-controller='myController'>
<h3>Records: {{(projects|filter:filter).length}} of {{projects.length}}</h3>
<p><input type="text" name="generalSearch" placeholder="Search Project Title" ng-model="filter.name"></p>
<p><select ng-model="filter.stateID"
ng-options="item.stateID as item.state for item in st_option"></select>
<select ng-model="filter.countyID"
ng-options="item.countyID as item.county for item in co_option | filter:{ co_state_id : filter.stateID }">
</select></p>
<p>Reset Filters</p>
<div ng-repeat="project in projects | filter:filter">
<div>
<br>Name: {{ project.name }}
<br>State: {{project.state}}
<br>County: {{project.county}}
<br>
<span ng-hide="{{project.stateID}} "></span>
<span ng-hide="{{project.countyID}} "></span>
</div>
</div>
</div>
And a fiddle:
https://jsfiddle.net/webmastersean/4m2d5n8u/
Set the last parameter of your filter to true, see the comparator parameter:
<div ng-repeat="project in projects | filter:filter:true">
Edit to allow for multiple filters:
<input type="text" name="generalSearch" placeholder="Search Project Title" ng-model="filter2.name">
<div ng-repeat="project in projects | filter:filter:true | filter:filter2">
I hope the title of this question is not confusing to anyone - but I need to figure out something that seems very basic but I can't seem to "get it"...
Basically I have multiple filters, and two of them filter on numbers. But, if one number is say "1" (California in the example on jsFiddle) and another is "13" (Arizona) filtering will include both if I select "1".
Here's my HTML:
<div ng-app='app' ng-controller='myController'>
<h3>Records: {{(projects|filter:filter).length}} of {{projects.length}}</h3>
<p><input type="text" name="generalSearch" placeholder="Search Project Title" ng-model="filter.name"></p>
<p><select ng-model="filter.stateID"
ng-options="item.stateID as item.state for item in st_option"> </select>
<select ng-model="filter.countyID"
ng-options="item.countyID as item.county for item in co_option | filter:{ co_state_id : filter.stateID }">
</select></p>
<p>Reset Filters</p>
<div ng-repeat="project in projects | filter:filter">
<div>
<br>Name: {{ project.name }}
<br>State: {{project.state}}
<br>County: {{project.county}}
<br>
<span ng-hide="{{project.stateID}} "></span>
<span ng-hide="{{project.countyID}} "></span>
</div>
JAVASCRIPT CODE:
var app = angular.module('app', []);
app.controller('myController', function($scope) {
$scope.projects = [{
name: 'First thing',
state: 'CA',
stateID: '1',
county: 'Orange',
countyID: '191'
}, {
name: 'Another Thing',
state: 'CA',
stateID: '1',
county: 'LosAngeles',
countyID: '190'
}, {
name: 'In California',
state: 'CA',
stateID: '1',
county: 'Orange',
countyID: '191'
}, {
name: 'Hey Arizona!',
state: 'Arizona',
stateID: '13',
county: 'Multiple Counties',
countyID: '3178'
},{
name: 'hello Utah',
state: 'Utah',
stateID: '14',
county: 'Utah County',
countyID: '200'
}];
$scope.st_option = [{
state: "California",
stateID: "1"
}, {
state: "Arizona",
stateID: "13"
},{
state: "Utah",
stateID: "14"
}];
$scope.co_option = [{
county: "Orange",
countyID: "191",
co_state_id: "1"
}, {
county: "Multiple Counties",
countyID: "3178",
co_state_id: "13"
}, {
county: "Sonoma",
countyID: "218",
co_state_id: "1"
}, {
county: "Los Angeles",
countyID: "190",
co_state_id: "1"
}, {
county: "Utah County",
countyID: "200",
co_state_id: "14"
}];
$scope.filter = {};
$scope.clearFilter = function() {
$scope.filter = {};
};
});
I've created a jsFiddle here:
https://jsfiddle.net/webmastersean/4m2d5n8u/
I know I need to add "true" to the filter but I'm not sure where or how.
filter has a third parameter, a comparator function. As syntactic sugar, this third parameter can also take the value true to mean strict comparison. That means all you need to do is add :true to the end of your county filter:
<select ng-model="filter.countyID"
ng-options="item.countyID as item.county for item in co_option | filter:{ co_state_id : filter.stateID }:true">
</select>
Updated fiddle. Now when you select California you only get counties in California.
I am working on upgrading one of my Angular/Kendo UI projects from v2014.2.903 to v2014.3.1119. I have encountered a few instances where v2014.3.1119 breaks functionality that worked fine in v2014.2.903. I decided to create a couple JSFiddles to illustrate the issues, but unfortunately, the JSFiddle that points to v2014.2.903 doesn't seem to even recognize Kendo UI.
v2014.3.1119 JSFiddle (this works) ... http://jsfiddle.net/lejuan5150/w0711rdg/
v2014.2.903 JSFiddle (this doesn't work) ... http://jsfiddle.net/lejuan5150/4svqnaz6/
Both contain the same code and configuration aside from the version of Kendo UI they are referencing. Here is the code:
HTML:
<div>
<div data-ng-controller="personController">
<div
kendo-grid="personGrid"
k-options="personGridOptions"
k-ng-delay="personGridOptions">
</div>
<br />
First Name Combo Box:
<select
kendo-combo-box="firstNameComboBox"
k-options="firstNameComboBoxOptions"
k-ng-delay="firstNameComboBoxOptions"
k-ng-model="selectedPerson.firstName"
></select>
<br />
Last Name Combo Box:
<select
kendo-drop-down-list="lastNameDropDownList"
k-options="lastNameDropDownListOptions"
k-ng-delay="lastNameDropDownListOptions"
k-ng-model="selectedPerson.lastName"
></select>
</div>
JavaScript:
var app = angular
.module("app", [
"kendo.directives"
]);
app.controller("personController", [
"$scope",
personController
]);
function personController(
$scope
){
init();
function init(){
var personData = [{
firstName: "Joe",
lastName: "Smith",
status: "Active"
},{
firstName: "John",
lastName: "Smith",
status: "Active"
},{
firstName: "Travis",
lastName: "Smith",
status: "Expired"
}];
$scope.personDataSource = new kendo.data.DataSource({
data: personData
});
$scope.firstNamesData = [{
id: "Joe",
firstName: "Joe"
},{
id: "George",
firstName: "George"
},{
id: "John",
firstName: "John"
},{
id: "Travis",
firstName: "Travis"
}];
$scope.lastNamesData = [{
id: "Jones",
lastName: "Jones"
},{
id: "Smith",
lastName: "Smith"
}];
bindPersonGrid();
bindFirstNameComboBox();
bindLastNameDropDownList();
}
function bindPersonGrid(){
$scope.personGridOptions = {
dataSource: $scope.personDataSource,
selectable: "row",
dataBound: onPersonGridDataBound,
change: onPersonGridRowSelected
}
}
function onPersonGridDataBound(){
var grid = this;
var firstRow = grid.element.find("tbody tr:first");
grid.select(firstRow);
}
function onPersonGridRowSelected(
event
){
var grid = event.sender;
$scope.selectedPerson = grid.dataItem(grid.select());
$scope.$digest();
}
function bindFirstNameComboBox(){
$scope.firstNameComboBoxOptions = {
dataSource: $scope.firstNamesData,
dataTextField: "firstName",
dataValueField: "id"
};
}
function bindLastNameDropDownList(){
$scope.lastNameDropDownListOptions = {
dataSource: $scope.lastNamesData,
dataTextField: "lastName",
dataValueField: "id"
};
}
}
Does anyone know why the v2014.2.903 JSFiddle doesn't work?
I found the issue. Kendo v2014.2.903 doesn't like k-ng-delay when using a hard coded array of JavaScript objects.