I'm trying to use ui-select module in my system, I injected ui-module and ngSanitize
angular.module('app', ['ngSanitize', 'ui.select']);
And included their JS files in HTML:
<link rel="stylesheet" href="/local/mentoring/assets/ui-select/dist/select.min.css">
<script src="/local/mentoring/assets/ui-select/dist/select.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
<div ng-controller="ctrl">
<ui-select ng-model="selected.value">
<ui-select-match>
<span ng-bind="$select.selected.name"></span>
</ui-select-match>
<ui-select-choices repeat="item in (itemArray | filter: $select.search) track by item.id">
<span ng-bind="item.name"></span>
</ui-select-choices>
</ui-select>
</div>
My JS:
angular.module('app')
.controller('ctrl', ['$scope', function ($scope){
$scope.itemArray = [
{id: 1, name: 'first'},
{id: 2, name: 'second'},
{id: 3, name: 'third'},
{id: 4, name: 'fourth'},
{id: 5, name: 'fifth'},
];
$scope.selectedItem = $scope.itemArray[0];
}]);
But when I'm using the directive, is reporting following error to me:
What I wrong in my code?
Update 1:
I changed angular.min.js to angular.js, then my console is reporting following error:
Try to update the ui.select version. Here is a working solution.
DEMO
var myApp = angular.module('myApp', ['ngSanitize', 'ui.select']);
myApp.controller('Controller', ['$scope',
function($scope) {
$scope.itemArray = [{
id: 1,
name: 'first'
}, {
id: 2,
name: 'second'
}, {
id: 3,
name: 'third'
}, {
id: 4,
name: 'fourth'
}, {
id: 5,
name: 'fifth'
}, ];
$scope.selectedItem = $scope.itemArray[0];
}
]);
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="https://code.angularjs.org/1.4.0-beta.6/angular-sanitize.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="Controller">
<ui-select ng-model="selected.value">
<ui-select-match>
<span ng-bind="$select.selected.name"></span>
</ui-select-match>
<ui-select-choices repeat="item in (itemArray | filter: $select.search) track by item.id">
<span ng-bind="item.name"></span>
</ui-select-choices>
</ui-select>
</div>
</body>
</html>
Related
I have an array of objects called articles each of which contains an array of strings called category. Each article is represented in the DOM with an ngRepeat directive which contains a second ngRepeat directive to represent each category. The second ngRepeat has a limitTo filter that limits the number of categories to 2. When the user mouses over the base article element the limit should be removed and all strings in the category array should be visible.
My problem is that when a user mouses over one element the full array of categories for every object in the articles array is revealed. How can I get the DOM to reveal only the full categories for the element the mouse event takes place on?
Plunkr: https://plnkr.co/edit/PW51BBnQEv589rIdnaCK?p=preview
You can pass your article on which you hover and set in a scope variable. Than simply update your ng-if check to :
ng-if="hoverMode === true && hoveredArticle === article"
Working example :
// Code goes here
angular
.module('myApp', [])
.controller('myController', ($scope) => {
$scope.articles = [ { date: 'some', category: [ {name: "Sports"}, {name: "News"}, {name: "Cinema"} ] }, { date: 'some', category: [ {name: "A"}, {name: "B"}, {name: "C"} ] }, { date: 'some', category: [ {name: "D"}, {name: "E"}, {name: "F"} ] } ]
$scope.hoverMode = false;
$scope.showAllcat = function(article) {
$scope.hoveredArticle = article;
$scope.hoverMode = true;
}
$scope.hideAllcat = function() {
$scope.hoveredArticle = null;
console.log('hover working');
$scope.hoverMode = false;
}
});
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<script data-require="angular.js#4.0.0" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script data-require="angular.js#4.0.0" data-semver="4.0.0" src="script.ts"></script>
<script data-require="angular.js#4.0.0" data-semver="4.0.0" src="system.config.js"></script>
<script data-require="angular.js#4.0.0" data-semver="4.0.0" src="tsconfig.json"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller='myController'>
<table>
<tbody>
<tr>
<th>Date</th>
<th>Categories</th>
</tr>
<tr ng-repeat="article in articles">
<td><span>{{ article.date }}</span></td>
<td ng-if="hoverMode === false || hoveredArticle !== article">
<span ng-repeat="cat in article.category | limitTo: 2">
<span class="label label-warning"
ng-mouseover="showAllcat(article)">{{ cat.name}}
</span>
</span>
</td>
<td ng-if="hoverMode === true && hoveredArticle === article">
<span ng-repeat="cat in article.category">
<span class="label label-warning"
ng-mouseleave="hideAllcat()">{{ cat.name}}
</span>
</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Here's another way this can be approached. I removed the ng-if directive as it is not needed. In your first ng-repeat directive the article object is available in the scope to be used. $scope.hoverMode was removed in favor of adding an attr to each article called limit.
The ng-mouseover event i replaced in favor of ng-mouseenter as it is the parallel event to ng-mouseleave. Instead of having these directives call a function, the limit value is manipulated via a simple expression in the DOM.
I left the function showAllCat() in the code with modifications. It takes an article object as a parameter to manipulate the category directly.
If the limit var is undefined, then there is no limit constraint in the filter.
By removing ng-if you're removing n number of listeners equivalent to the number of articles. Since it wasn't needed, that's just extra overhead.
// Code goes here
angular
.module('myApp', [])
.controller('myController', ($scope) => {
$scope.minLimit = 2;
$scope.maxLimit = undefined;
$scope.articles = [{
date: 'some',
category: [{
name: "Sports"
}, {
name: "News"
}, {
name: "Cinema"
}]
}, {
date: 'some',
category: [{
name: "A"
}, {
name: "B"
}, {
name: "C"
}]
}, {
date: 'some',
category: [{
name: "D"
}, {
name: "E"
}, {
name: "F"
}]
}];
$scope.articles.forEach((article)=>{article.limit=$scope.minLimit});
$scope.showAllcat = function(article) {
console.log('hover working');
article.limit = article.limit === minLimit ? maxLimit : minLimit;
}
});
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<script data-require="angular.js#4.0.0" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script data-require="angular.js#4.0.0" data-semver="4.0.0" src="script.ts"></script>
<script data-require="angular.js#4.0.0" data-semver="4.0.0" src="system.config.js"></script>
<script data-require="angular.js#4.0.0" data-semver="4.0.0" src="tsconfig.json"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller='myController'>
<table>
<tbody>
<tr>
<th>Date</th>
<th>Categories</th>
</tr>
<tr ng-repeat="article in articles"
ng-mouseenter="article.limit = maxLimit"
ng-mouseleave="article.limit = minLimit">
<td><span>{{ article.date }}</span></td>
<td><span ng-repeat="cat in article.category | limitTo: article.limit">
<span class="label label-warning">{{cat.name}}
</span>
</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>
In the following code, when input is empty, all the names are shown. I want no name when the input field is empty.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="namesCtrl">
<input ng-model="search.$"></label> <br>
<ul>
<li ng-repeat="x in names | filter : search">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>
Thanks
Just add a ng-if
<ul ng-if="search.$">
DEMO
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="namesCtrl">
<input ng-model="search.$"></label> <br>
<ul ng-if="search.$">
<li ng-repeat="x in names | filter : search">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>
Use ng-if
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="namesCtrl">
<input ng-model="search.$"></label> <br>
<ul>
<li ng-if="search.$" ng-repeat="x in names | filter : search">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>
Try This Code it will help you
<script https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="namesCtrl">
<input ng-model="search"></input> <br>
<ul>
<li ng-repeat="x in names | filter : search">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
if ($scope.$$childHead.search == "") {
$scope.names = [];
} else {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
}
});
</script>
<!-- end snippet -->
I have been working on this tutorial (https://thinkster.io/mean-stack-tutorial) and once I switched to Adding Angular Services incrementUpvotes stopped working and I can't seem to find the reason. I am very new to Angular services and I cannot tell if I have instantiated correctly or if there is some other problem.
Any help is appreciated!!!
index.html
<html>
<head>
<title>Flapper News</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="app.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="flapperNews">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div ng-repeat="post in posts | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up"
ng-click="incrementUpVotes(post)"></span>
{{post.upvotes}}
<span style="font-size:20px; margin-left:10px;">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</span>
</div>
<form ng-submit="addPost()"
style="margin-top:30px;">
<h3>Add a new post</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Title"
ng-model="title"></input>
</div>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Link"
ng-model="link"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
</body>
</html>
app.js
var app = angular.module('flapperNews', ['ui.router']);
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
app.factory('posts', [function(){
var o = {
posts: []
};
return o;
}]);
app.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
$scope.test = 'Hello world!';
$scope.posts = posts.posts;
$scope.posts = [
{title: 'post 1', upvotes: 5},
{title: 'post 2', upvotes: 2},
{title: 'post 3', upvotes: 15},
{title: 'post 4', upvotes: 9},
{title: 'post 5', upvotes: 4}
];
$scope.addPost = function() {
if(!$scope.title || $scope.title === '') {
return;
}
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0
});
$scope.title = '';
$scope.link = '';
};
$scope.c = function(post) {
post.upvotes += 1;
};
}]);
Few things.
First, here you are importing data from your service, then immediately overwriting it:
$scope.posts = posts.posts;
$scope.posts = [
{title: 'post 1', upvotes: 5},
{title: 'post 2', upvotes: 2},
{title: 'post 3', upvotes: 15},
{title: 'post 4', upvotes: 9},
{title: 'post 5', upvotes: 4}
];
But to answer your direct question, you have your ng-click pointed at a function called incrementUpVotes(post) so it's looking for a function on your controller defined as $scope.incrementUpVotes. It seems you wrote that function but called it $scope.c so just rename that to $scope.incrementUpVotes and you should be good.
$scope.incrementUpVotes = function(post) {
post.upvotes += 1;
};
There is the following variable in Angular controller:
$scope.items = [
{ title: 'x', type: 'x'},
{ title: 'y', type: 'y'}
];
You can see only 2 items in array, but they will be more. So, I need to 'render' this array in HTML. I can use ng-repeat Angular directive, but there is some problem: if item has type 'x' I must render for it, if y - for it. How can I do it? Thanks in advance!
Place a :filter in the ng-repeat, like this:
var app = angular.module('myapp', []);
app.controller('myctrl', function($scope) {
$scope.items = [{
title: 'x',
type: 'x'
}, {
title: 'y',
type: 'y'
}, , {
title: 'another x',
type: 'x'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="myctrl">
<div>Only items of type 'x':</div>
<ul>
<li ng-repeat="item in items | filter: {type: 'x'} ">{{item.title}}</li>
</ul>
</div>
Use a commbination of ng-repeat and ng-switch:
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.items = [
{ title: "TestX", type: "x" },
{ title: "TestY", type: "y" }
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="item in items">
{{ item.title }}
<div ng-switch="item.type">
<div ng-switch-when="x">
HTML for type x
</div>
<div ng-switch-when="y">
HTML for type y
</div>
</div>
</div>
</div>
You can also use ng-hide which hides element if expression is true
<div ng-repeat="item in items" >
<div ng-hide="item.type == 'y'">
{{ item.type }}
</div>
<div ng-hide="item.type == 'x'">
{{ item.type }}
</div>
</div>
If you want to render only for item type x then can user 'filter' in ng-repeat or can use ng-if
<div ng-repeat="item in items">
<div ng-if="item.type==='x'">
<p>Item for type x</p>
</div>
</div>
First off new to Angular here :)
I have a page that shows a list of items from a JSON object. That Json object has an array in it of dates
$obj = [
{
id: '1',
GoalName: 'Smoke Less',
StartDate: '9/1/2015',
EndDate: '9/30/2015',
GoalType: "positive",
Category: "Health",
Weight: "3",
TimesPerWeek: 4,
Dates: {
"09/11/2015": 0,
"09/10/2015": 1,
"09/08/2015": 1
}
}
I got ng-repeat to show off the items the array, but I am struggling to understand how to control the checkboxes. When I present the items I set a date on the screen and I want to check the array to see if that date is present and if it is then check the checkbox. And additionally if the user then clicks the checkbox it updates the item. I vaguely understand that I need to make a model of the checkboxes, but don't fully understand how that works.
app.controller('TrackGoals', function ($scope) {
$scope.today = Date.today();
});
<ul class="list" id="thehabits" ng-repeat="goal in goals">
<li class="expanded-cell">
<div class="pull-right form-group cell-content">
<label>
<input type="checkbox" class="option-input checkbox" ng-model="ids[goal.dates.id].value">
</label>
</div>
<div class="cell-content">
<span id="habittext" class="title">{{ goal.GoalName }} </span>
</div>
</li>
</ul>
Try this:
var app = angular.module('myApp', []);
app.controller('TrackGoals', function($scope) {
$scope.goals = [{
id: '1',
GoalName: 'Smoke Less',
StartDate: '9/1/2015',
EndDate: '9/30/2015',
GoalType: "positive",
Category: "Health",
Weight: "3",
TimesPerWeek: 4,
Dates: {
"09/11/2015": 0,
"09/10/2015": 1,
"09/08/2015": 1
}
}, {
id: '2',
GoalName: 'Smoke Less',
StartDate: '9/1/2015',
EndDate: '9/30/2015',
GoalType: "positive",
Category: "Health",
Weight: "3",
TimesPerWeek: 4,
Dates: {}
}];
$scope.setCheckboxVal = function(val) {
var arr = [];
for (var i in val) {
if (val.hasOwnProperty(i)) {
arr.push({
date: i,
value: val[i]
});
}
}
return !!arr.length;
};
$scope.showData = function() {
console.log(JSON.stringify($scope.goals));
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-controller="TrackGoals">
<ul class="list" id="thehabits" ng-repeat="goal in goals">
<li class="expanded-cell">
<div class="pull-right form-group cell-content">
<label>
<input type="checkbox" class="option-input checkbox" ng-model="goal.checkboxVal" ng-init="goal.checkboxVal=setCheckboxVal(goal.Dates)">
</label>
</div>
<div class="cell-content">
<span id="habittext" class="title">{{ goal.GoalName }} </span>
</div>
</li>
</ul>
<button type="button" ng-click="showData()">Show data</button>
</body>
</html>