Develop Reference

How to hide all the names when input is empty?

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 -->

How to make md-list-item active when selected during ng-repeat?

Here is my scenario
When i select any one item in list(<md-list-item>) an active class should be appended for the particular item.
When iam trying to do it, active class getting appended for all the items. Please help me if anyone knows the solution. Iam new to material design.
<md-list-item class="md-3-line" ng-repeat="review in oReviews" ng-click="fnReviewEmployeeId(review.empId)">
<img ng-src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" class="md-avatar">
<div class="md-list-item-text" layout="column">
<h3>
{{review.name }}
</h3>
<span class="review-subtext">{{review.info}}</span >
<p class="review-status">{{review.status}}</p>
</div>
<md-divider></md-divider>
</md-list-item>

Here's one way of doing it - CodePen
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
<md-list>
<md-list-item class="md-3-line" ng-repeat="review in oReviews" ng-click="fnReviewEmployeeId($index)" ng-class="{selectedIndex: selectedIndex===$index}">
<img ng-src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" class="md-avatar">
<div class="md-list-item-text" layout="column">
<h3>
{{review.name }}
</h3>
<span class="review-subtext">{{review.info}}</span >
<p class="review-status">{{review.status}}</p>
</div>
<md-divider></md-divider>
</md-list-item>
</md-list>
</div>
JS
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngDialog'])
.controller('AppCtrl', function($scope) {
$scope.selectedIndex = null;
$scope.oReviews = [
{name: "Cheese", info: "Dairy", status: "Delicious"},
{name: "Beef", info: "Cow", status: "Versatile"},
{name: "Bread", info: "Yeast", status: "Everywhere"},
];
$scope.fnReviewEmployeeId = function (index) {
if ($scope.selectedIndex === null) {
$scope.selectedIndex = index;
}
else if ($scope.selectedIndex === index) {
$scope.selectedIndex = null;
}
else {
$scope.selectedIndex = index;
}
}
});
CSS
.selectedIndex {
background: yellow;
}

Can you add a boolean type property to the oReviews object? You could update that property when they click on it and then you can use ngClass to add the active class

I think Material Design handles selection differently, under List in the Docs, the example shows using a checkbox to indicate selection based on ng-model:
//I added the ng-click
<md-list-item ng-repeat="topping in toppings"
ng-click="topping.wanted = !topping.wanted">
<p> {{ topping.name }} </p>
<md-checkbox class="md-secondary" ng-model="topping.wanted"></md-checkbox>
</md-list-item>
Look for Section List Controls: https://material.angularjs.org/latest/demo/list

How to drag and drop items to external container?

Basically, I have the following markup:
<script>
$(function() {
$('.box').on('mousedown', function(e) {
console.log(e);
});
});
</script>
<body ng-controller="MainCtrl">
<ul ui-sortable="sortableOptions" ng-model="list">
<li draggable ng-repeat="item in list">Item: {{item}}</li>
</ul>
<div class="boxes">
Drop to external area: <br/><br/>
<div class="box" style="background: red;"></div>
<div class="box" style="background: yellow;"></div>
<div class="box" style="background: orange;"></div>
</div>
</body>
Fiddle: http://plnkr.co/edit/xKw6sSbymA5M8R2v4OGF?p=preview
Now, I want to be able to drag and drop items from the list to that "external" container.
When user "drops" item to any of colored areas, I want to know that event just happend and which element is affected, as well
Already tried to listen for mousedown/mouseup events on each .box element, but it doesn't work as expected.

The library you are using is sorting library. You need to use drag-drop library for this.
For example, you can use https://github.com/codef0rmer/angular-dragdrop
Refer the docs for all available event callbacks.
Copying the example code snippet directly (for reference check here),
HTML:
<ul class="thumbnails">
<li style='margin-left:10px;' ng-repeat="item in list1">
<div class="btn"
data-drop="true"
ng-model='list1'
jqyoui-droppable="{index: {{$index}}}">
<div class="btn btn-info"
ng-show="item.title"
data-drag="{{item.drag}}"
data-jqyoui-options="{revert: 'invalid'}"
ng-model="list1"
jqyoui-draggable="{index: {{$index}},placeholder:true,animate:true}">
{{item.title}}
</div>
</div>
</li>
</ul>
<div class="container form-inline" style="text-align: center;">
<div class="btn"
ng-repeat="item in list2 | orderBy : 'title'"
data-drop="true"
ng-model='list2'
jqyoui-droppable="{index: {{$index}}, applyFilter: 'filterIt'}">
<div class="btn btn-info"
data-drag="{{item.drag}}"
data-jqyoui-options="{revert: 'invalid'}"
ng-model="list2"
jqyoui-draggable="{index: {{$index}},animate:true, applyFilter: 'filterIt'}"
ng-hide="!item.title">
{{item.title}}
</div>
</div>
</div>
Controller:
App.controller('YourCtrl', function($scope, $filter) {
$scope.filterIt = function() {
return $filter('orderBy')($scope.list2, 'title');
};
$scope.list1 = [];
$scope.list2 = [
{ 'title': 'Item 3', 'drag': true },
{ 'title': 'Item 2', 'drag': true },
{ 'title': 'Item 1', 'drag': true },
{ 'title': 'Item 4', 'drag': true }
];
angular.forEach($scope.list2, function(val, key) {
$scope.list1.push({});
});
});
Hope this solves your problem.

Try replace the 'mousedown' with 'drop'.

Angular bootstrap ui accordion group "open one at a time" not working

I have been using Angular ui-bootstrap. In here oneAtATime is not working even though the value is set to true. Here is my code.
<div ng-repeat="group in groups track by group.key">
<uib-accordion close-others="oneAtATime">
<uib-accordion-group>
<uib-accordion-heading >
<div>
{{ group.title }}
<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</div>
</uib-accordion-heading>
</uib-accordion-group>
</uib-accordion>
</div>
plnkr link.

Your HTML structure is wrong. There should be only single uib-accordion element and multiple uib-accordion-group element. So simply change your code like this:
<uib-accordion close-others="oneAtATime">
<uib-accordion-group ng-repeat="group in groups track by group.key">
<uib-accordion-heading>
<div>
{{ group.title }}
<i class="pull-right glyphicon"
ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</div>
</uib-accordion-heading>
</uib-accordion-group>
</uib-accordion>
What I did is simply moved your ng-repeat expression in uib-accordion-group element.
See the working example below:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function($scope) {
$scope.oneAtATime = true;
$scope.groups = [{
title: 'Dynamic Group Header - 1',
content: 'Dynamic Group Body - 1',
key: 1
}, {
title: 'Dynamic Group Header - 2',
content: 'Dynamic Group Body - 2',
key: 2
}];
$scope.items = ['Item 1', 'Item 2', 'Item 3'];
$scope.addItem = function() {
var newItemNo = $scope.items.length + 1;
$scope.items.push('Item ' + newItemNo);
};
$scope.status = {
isCustomHeaderOpen: false,
isFirstOpen: true,
open: true,
isFirstDisabled: false
};
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AccordionDemoCtrl">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="oneAtATime">Open only one at a time
</label>
</div>
<uib-accordion close-others="oneAtATime">
<uib-accordion-group ng-repeat="group in groups track by group.key">
<uib-accordion-heading>
<div>
{{ group.title }}
<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</div>
</uib-accordion-heading>
</uib-accordion-group>
</uib-accordion>
</div>
</body>
</html>

AngularJS - Count results after using both filter and groupBy

I am using angular with angular-filter
Filtering and grouping is working. But I also want to check if the filtered list is empty, similar to this question:
AngularJS - placeholder for empty result from filter
In the sample below I use player in filteredPlayers = (players | filter:search) to access the count through filteredPlayers.length
How can I do something similar for the grouped list in the example?
Code:
var app = angular.module('myApp', ['angular.filter']);
app.controller('myCtrl', ['$scope', function($scope) {
$scope.players = [
{name: 'Gene', team: 'alpha'},
{name: 'George', team: 'beta'},
{name: 'Steve', team: 'gamma'},
{name: 'Paula', team: 'beta'},
{name: 'Scruath', team: 'gamma'}
];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<input type="text" ng-model="search">
<hr>
<div ng-hide="filteredPlayers.length">
This list is empty. (this is working).
</div>
<ul>
<li ng-repeat="player in filteredPlayers = (players | filter:search)">
player: {{ player.name }}
</li>
</ul>
<hr>
<div>
The list is empty. (this is not working - always displayed).
</div>
<ul ng-repeat="(key, value) in players | filter:search | groupBy: 'team'">
Group name: {{ key }}
<li ng-repeat="player in value">
player: {{ player.name }}
</li>
</ul>
</div>
</div>

You can do something similar:
<ul ng-repeat="(key, value) in (filteredPlayers = (players | filter:search) | groupBy: 'team')">
..
</ul>
<h1>Length: {{ filteredPlayers.length }}</h1>