I a getting error
TypeError: Cannot read property 'some' of undefined
at
MdChipsCtrl.appendChip (angular-material.js:27485)
at MdChipsCtrl.<anonymous> (angular-material.js:27791)
at angular.js:1256
The looping is undefined and it has to create afinal array of all the selected values. Below is the code that takes only one chip per input field.
html
<div layout="column" style="background-color: #fff" layout-padding>
<h1>MISTAKE TTYPES</h1>
<div layout="column" ng-cloak>
<div class="md-padding" layout="column">
<form name="fruitForm">
<div ng-repeat="items in [1,2]">
<md-chips ng-model="vm.selectedMistakes[$index]" md-autocomplete-snap
md-on-remove = "vm.removeChip($index)"
name="fruitName[$index]" >
<md-autocomplete
md-selected-item="vm.selectedItem[$parent.$index]"
md-no-cache="vm.noCache"
md-max-chips="1"
md-search-text="vm.searchText"
md-items="item in vm.mistakes"
md-item-text="item.name"
md-selected-item-change="vm.searchTextChange($index)"
placeholder={{vm.placeholder}}
name="fruitNameAuto[$parent.$index]">
<span md-highlight-text="vm.searchText">{{item.name}}</span>
</md-autocomplete>
<md-chip-template>
<span>
<strong>{{$chip.name}}</strong>
</span>
</md-chip-template>
</md-chips>
</div>
</form>
</div>
</div>
</div>
Controller
(function () {
'use strict';
angular
.module('app')
.controller('chipsCtrl', chipsCtrl);
/* #ngInject */
function chipsCtrl($q,$timeout) {
var vm = this;
vm.selectedItem = null;
vm.searchText = null;
vm.mistakes = loadMistakes();
vm.selectedMistakes = [[],[]];
vm.transformChip = transformChip;
vm.searchTextChange = searchTextChange;
vm.removeChip = removeChip;
/**
* Return the proper object when the append is called.
*/
function transformChip(chip) {
console.log(chip);
// If it is an object, it's already a known chip
if (angular.isObject(chip)) {
return chip;
}
// Otherwise, create a new one
return { name: chip, id: 1 }
}
vm.placeholder = "Select Mistake Type";
function searchTextChange(index) {
//console.log(vm.selectedMistakes);
vm.searchText = null;
if(vm.selectedMistakes[index]){
vm.placeholder = (vm.selectedMistakes[index].length > 0) ? "Just 1 allowed" : "Select Mistake Type";
}
}
function removeChip(index){
vm.placeholder = (vm.selectedMistakes[index].length > 0) ? "Just 1 allowed" : "Select Mistake Type";
}
function loadMistakes() {
return [
{
'name': 'Simple',
'id': 1
},
{
'name': 'Conceptual',
'id': 2
},
{
'name': 'Silly',
'id': 3
},
{
'name': 'Visual',
'id': 4
},
{
'name': 'dilemma',
'id': 5
}
];
}
}
})();
EXPECTED OUTPUT :
vm.selectedMistakes = [
[
{
"name": "Conceptual",
"id": 2
}
],
[
{
"name": "Simple",
"id": 1
}
]
]
I am getting smae value triggered to both the inputs
Related
I'm using angularjs and I have data like this :
$scope.users = [{
name: "Pratik"
queue: [{number: "199"},{number: "111"}],
status: "OK"
}]
My view :
.available{
background-color: #00226f;
color: #f8f8f8;
}
<div class="col-xs-12 col-sm-3" ng-repeat="user in users">
<span ng-class="{'available': user.queue[0].number == 111}" class="badges ">111</span>
</div>
My problem is that I want to assign the class "available" if the queue array in users contains the number "111" at any index. In the users array the number:"111" may appear at any index so in the view I can't always use user.queue[1].number == 111 or user.queue[1].number == 111 to assign the class. I want a solution which will check if the queue array contains number:"111" and assign the class of available accordingly.
I tried to do it like this : ng-class="{'available': user.queue[i].number == 111}" but it's not working. How do I do it?
This my current workaround to apply the class:
ng-class="{'available': user.queue[0].number == 111 || user.queue[1].number == 111}"
try below code snippet
can achieve by using lodash js also using _.filter
_.filter(array, { 'number': '111' } )
Ref: https://lodash.com/docs/4.17.11#find
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.findObjectByKey = function(array, key, value) {
for (var i = 0; i < array.length; i++) {
if (array[i][key] === value) {
return array[i];
}
}
return null;
};
$scope.users = [{
name: "Pratik",
queue: [{number: "199"},{number: "666"}],
status: "OK"
},
{
name: "Pratik 2",
queue: [{number: "111"},{number: "555"}],
status: "OK 2"
},
{
name: "Pratik 3",
queue: [{number: "999"},{number: "888"}],
status: "OK 3"
}
];
$scope.searcInArray = function(array){
// var obj = $scope.findObjectByKey(array, 'number', '111');
// using loadsh
var obj = _.filter(array, { 'number': '111' } );
return obj.length > 0;
};
}
.available{
background-color: #00226f;
color: #f8f8f8;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="col-xs-12 col-sm-3" ng-repeat="user in users">
<span ng-class="{'available' : searcInArray(user.queue)}" class="badges ">111</span>
</div>
</div>
</body>
</html>
You have to add use ng-repeat to loop all queue and find how has item.number == '111'
<div class="col-xs-12 col-sm-3" ng-repeat="user in users">
<div ng-repeat="item in user.queue">
<span ng-class="{'available': item.number == '111'}" class="badges ">111</span>
</div>
</div>
NOTE!
if you want show only the item.number == '111' you can use ng-hide/show
To check that condition where 111 appears at any index the easy fix could be to call a function that will check that property in the array and return true or false based on the condition. Something like below:
var app = angular.module('myApp', []);
app.controller('MainCtrl', ['$scope', function($scope){
$scope.users = [{
name: "Pratik",
queue: [{
number: "111"
}, {
number: "119"
}],
status: "OK"
},
{
name: "Pratik123",
queue: [{
number: "199"
}, {
number: "185"
}],
status: "OK"
}];
$scope.checkQueue = function(queue){
return queue.find(({number})=>number === '111');
}
}]);
.available {
background-color: #00226f;
color: #f8f8f8;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
<div class="col-xs-12 col-sm-3" ng-repeat="user in users">
<span ng-class="{'available': checkQueue(user.queue)}" class="badges ">{{user.name}}</span>
</div>
</div>
I am new in angular js i want to put filter in ng-repeat i have json like this
var data = [
{name:test1,b1:{lastValue:0},b2:{lastValue:6},b3:{lastValue:6},b4:{lastValue:0}}
{name:test2,b1:{lastValue:6},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}}
{name:test3,b1:{lastValue:6},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}}
]
I want to put filter on lastValue i tested like this
ng-repeat = "d in data | filter:{*.lastValue:filterStatus}"
filterStatus // contain value of filter which user selected but its not working
I don't know how to do this i tried google but nothing found please help me
<input ng-model="filterStatus" type="text">
your filterStatus should hold model value
ng-repeat = "d in data | filter:filterStatus"
var app = angular.module("Profile", []);
app.controller("ProfileCtrl", function($scope) {
$scope.filter_val = {}
$scope.data = [{
name: 'test1',
b1: {
lastValue: 0
},
index: 'b1'
}, {
name: 'test2',
b2: {
lastValue: 6
},
index: 'b2'
}, {
name: 'test3',
b3: {
lastValue: 6
},
index: 'b3'
}, {
name: 'test4',
b4: {
lastValue: 0
},
index: 'b4'
}, {
name: 'test5',
b5: {
lastValue: 89
},
index: 'b5'
}, {
name: 'test6',
b6: {
lastValue: 68
},
index: 'b6'
}]
$scope.own_filter = function(val) {
if (!$scope.filter_val.value)
return true;
else {
return (String(val[val['index']]['lastValue'] || '').indexOf($scope.filter_val.value) != -1)
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Profile" ng-controller="ProfileCtrl">
<input type="text" ng-model="filter_val.value" placeholder="Enter Last Value">
<div class="row" ng-repeat="event in data |filter:own_filter track by $index ">
<h4>{{'Name : ' + event.name}}------{{'Last Value : '+event[event['index']]['lastValue']}}</h4>
</div>
</body>
Use {$:filterStatus} construction:
angular.module('app', []).controller('ctrl',function($scope){
$scope.data = [
{name:'test1',b1:{lastValue:1},b2:{lastValue:6},b3:{lastValue:6},b4:{lastValue:0}},
{name:'test2',b1:{lastValue:2},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}},
{name:'test3',b1:{lastValue:3},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}}
]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<div ng-app='app' ng-controller='ctrl'>
<input type='number' ng-model='filterStatus' ng-init='filterStatus=1'>
<ul>
<li ng-repeat='item in data | filter: {$:filterStatus}'>{{item.name}}</li>
</ul>
</div>
I'm building an AngularJS app. I have this array:
$scope.products = [
{name: 'cake (just it!)'},
{name: 'orange cake'},
{name: 'cheesecake'}
];
then I use ng-repeat for show it.
<li ng-repeat="product in products | filter : { name : word }">
{{ $product.name }}
</li>
I want to add a filter that will search the beginning of each word inside the phrase, so if I do this:
$scope.word = 'ca';
It will return the following array:
$scope.products = [
{name: 'cake (just it!)'},
{name: 'orange cake'}
];
You could do it using a custom filter as mentioned below
var app = angular.module("sampleApp", []);
app.controller("sampleController", ["$scope",
function($scope) {
$scope.products = [{
name: 'cake (just it!)'
}, {
name: 'orange cake'
}, {
name: 'cheesecake'
}, {
name: 'cheese'
}, {
name: 'cheeseca ca'
}];
}
]);
app.filter("nameFilter", function() {
return function(names, contains) {
return names.filter(function(obj) {
var expString = '(\\w*\\s|^)' + contains + '';
var exp = new RegExp(expString, "g");
if (exp.test(obj.name))
return name;
});
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="sampleApp">
<div ng-controller="sampleController">
<ul>
<li ng-repeat="product in products | nameFilter : 'ca' ">
{{product.name}}
</li>
</ul>
</div>
</div>
Im working on sorting on an array using Angular JS using orderBy. But still its not getting sorted on a particular key.
Here is the code
var app = angular.module('sortModule', [])
app.controller('MainController', function($scope,$filter){
$scope.languages = [
{ name: 'English', image: '/images/english.png',key:2 },
{ name: 'Hindi', image: '/images/hindi.png',key:3 },
{ name: 'English', image: '/images/english.png',key:2},
{ name: 'Telugu', image: '/images/telugu.png',key:1 }];
var newLanguages = []
newLanguages = angular.copy($scope.languages);
function sortImages() {
$scope.languages = []
$scope.keys = []
for(language in newLanguages) {
$scope.keys.push(newLanguages[language])
}
$filter('orderBy')($scope.keys, 'key')
console.log(JSON.stringify($scope.keys))
}
sortImages();
});
Fiddle
Im planning to see sorting based on "key". telugu should come first, english next and hindi last.
you need to have:
$scope.keys = $filter('orderBy')($scope.keys, 'key', false)
the order by filter returns a new array, it does not make changes to the passed array.
updated fiddle:
http://jsfiddle.net/kjuemhua/17/
Remove the OrderBy from the html markup to display unordered list:
<div ng-app="sortModule" class="nav">
<div ng-controller="MainController">
<button ng-click="sort()">Sort
</button>
<div></div>
<div >
<ul>
<li ng-repeat="lang in languages">
<span>{{lang.name}}</span>
</li>
</ul>
</div>
</div>
</div>
Now using the button sort sort the list
var app = angular.module('sortModule', [])
app.controller('MainController', function($scope,$filter){
$scope.languages = [
{ name: 'English', image: '/images/english.png',key:2 },
{ name: 'Hindi', image: '/images/hindi.png',key:3 },
{ name: 'English', image: '/images/english.png',key:2},
{ name: 'Telugu', image: '/images/telugu.png',key:1 }];
var newLanguages = []
newLanguages = angular.copy($scope.languages);
$scope.sort = function(){
$scope.languages = []
$scope.keys = []
for(language in newLanguages) {
$scope.keys.push(newLanguages[language])
}
$scope.keys = $filter('orderBy')($scope.keys, 'key', false);
$scope.languages = $scope.keys;
console.log(JSON.stringify($scope.keys))
}
});
I have a table with 'n' number of rows and each row has a checkbox. Upon selection of checkbox I am trying to display information coded inside <div> tag.
But even if check box has false value the data inside div is still displayed, am using ng-show in div tag to check if checkbox is true or false.
Below is the code I have used in table column:
<td>
<input id="{{test}}" type="checkbox" value="" ng-checked="selection.indexOf(test) > -1" ng-click="toggleSelection(test)" />
</td>
In JavaScript I have the below toggle function
toggle selection for a given line item by index
$scope.toggleSelection = function toggleSelection(test) {
var idx = $scope.selection.indexOf(test);
if it is currently selected
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
if it is newly selected
else {
$scope.selection.push(test);
}
};
Please point me if I am doing in wrong way, am pretty new to angular world.
this example might be pretty good for your case
<a href="http://jsfiddle.net/t7kr8/211/" >Click here </a>
Make sure you are binding model with ng-show
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
var _this = this;
$scope.tempArr = [{
status: false,
data: 'hey'
}, {
status: false,
data: 'hey'
}, {
status: false,
data: 'hey'
}];
$scope.tempArr = [{
status: false,
data: 'hey'
}, {
status: false,
data: 'hey'
}, {
status: false,
data: 'hey'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="myApp" ng-controller="formCtrl">
<table>
<tr ng-repeat="item in tempArr">
<td>
<input type="checkbox" ng-model="item.status">
</td>
<td><span ng-show="item.status">{{item.data}}</span>
</td>
</tr>
</table>
</div>
<div ng-app="checkbox" ng-controller="homeCtrl">
<div ng-repeat="item in list">
<input type="checkbox" checkbox-group />
<label>{{item.value}}</label>
</div>{{array}}
<br>{{update()}}
</div>
var app = angular.module('checkbox', []);
app.controller('homeCtrl', function($scope) {
$scope.array = [1, 5];
$scope.array_ = angular.copy($scope.array);
$scope.list = [{
"id": 1,
"value": "apple",
}, {
"id": 3,
"value": "orange",
}, {
"id": 5,
"value": "pear"
}];
$scope.update = function() {
if ($scope.array.toString() !== $scope.array_.toString()) {
return "Changed";
} else {
return "Not Changed";
}
};
})
.directive("checkboxGroup", function() {
return {
restrict: "A",
link: function(scope, elem, attrs) {
// Determine initial checked boxes
if (scope.array.indexOf(scope.item.id) !== -1) {
elem[0].checked = true;
}
// Update array on click
elem.bind('click', function() {
var index = scope.array.indexOf(scope.item.id);
// Add if checked
if (elem[0].checked) {
if (index === -1) scope.array.push(scope.item.id);
}
// Remove if unchecked
else {
if (index !== -1) scope.array.splice(index, 1);
}
// Sort and update DOM display
scope.$apply(scope.array.sort(function(a, b) {
return a - b
}));
});
}
}
});