Angular checkmark for list elements - angularjs

I am trying to have checkmarks in a list for those list elements where a certain condition is met.
My Html:
<div class="col col-70" ng-if="showBothEnterLists">
<ion-list>
<ion-item ng-repeat="w in word_pair | limitTo:4">
<input placeholder="Enter word" type="text" ng-model="word">
<input placeholder="Enter pair" type="text" ng-model="pair" ng-change="check(word, pair)">
<div ng-show="showCheckMark" align="right"><i class="ion-checkmark myCheckmark"></i></div>
</ion-item>
</ion-list>
</div>
Corresponding code in my controller:
$scope.word_pair = [
{'word':'Carla', 'pair':'Lion'},
{'word':'Sophie', 'pair':'Lotta'},
{'word':'Jannes', 'pair':'Stubbi'},
{'word':'Martin', 'pair':'Wolle'},
{'word':'Flo', 'pair':'Ign'},
{'word':'Rere', 'pair':'Rose'},
{'word':'Jean', 'pair':'Tamara'},
{'word':'Memo', 'pair':'Elk'},
{'word':'Nila', 'pair':'Naph'}
]
...
$scope.check = function(word, pair) {
for(var i=0; i < $scope.word_pair.length; i++) {
if($scope.word_pair[i].word == word && $scope.word_pair[i].pair == pair) {
$scope.showCheckMark=true
$scope.checkCount++
}
}
}
However, this code gives me checkmarks for all list items when condition for the first item is met.
How can I fix this?

UPDATE without remapping
create an object in your scope that will hold the user's answers
$scope.answers = {}
set the ng-model of each input in conjunction with the $index
<ion-item ng-repeat="w in word_pair | limitTo:4">
<input placeholder="Enter word" type="text" ng-model="answers['word'+$index]">
input placeholder="Enter pair" type="text" ng-model="answers['pair'+$index]" ng-change="check(word, pair)">
<div ng-show="showCheckMark(answers['word'+$index], answers['pair'+$index])" align="right"><i class="ion-checkmark myCheckmark"></i>asdadas</div>
</ion-item>
Finally the only thing showCheckMark has to do is check if the key and value exist
$scope.showCheckMark = function(word, pair){
return $scope.word_pair.filter( item => item.word == word && item.pair == pair).length;
}
Here is a working example in Codepen

Related

how to select one primary contact on listing of contacts in ng-repeat by radio button

I have list of contacts and repeating with ng-repeat how to make one primary contact by selecting radio button .
<div class="col-sm-12" ng-repeat='contact in acc.contacts'>
<div class="col-xs-2" ng-class="{'error':(sub && !contact.isPrimary)}">
<input type="radio" name='isPrimary' ng-model='contact.isPrimary' ng-value="true">
</div>
<div class="col-xs-2" ng-class="{'error':(sub && !contact.name)}">
<input type="text" ng-model='contact.name'>
</div>
</div>
</div>
my json is look like
{
"contacts": [
{
"isPrimary": false,
"name": null,
},
{
"isPrimary": false,
"name": null
},
{
"isPrimary": false,
"name": null
]
}
i want isPrimary should be true for one , but it does not set false when radio button got deselected
Because you use the radio button in an ng-repeat and the ng-model is a property of the repeated item, you can do it like this:
<div class="col-xs-2" ng-class="{'error':(sub && !contact.isPrimary)}">
<input type="radio" name='isPrimary'
ng-value="true"
ng-change="primaryClicked(contact)">
</div>
And in your controller:
$scope.primaryClicked = function(contact) {
// Set all others on false
for (var i = 0; i < $scope.acc.contacts.length; i++) {
$scope.acc.contacts[i].isPrimary = false;
}
// Set current on true
contact.isPrimary = true;
}
The correct approach is to use ng-value.
Modify your code:
<label data-ng-repeat="contact in acc.contacts">
<input type="radio" data-ng-model="contact.isPrimary" data-ng-value="true" />
{{contact.name}}
</label>
Hope this is helps you

Cross check input check box values against an array in angular

I have an array like following in my controller:
$scope.word_pair = [
{'word':'Carla', 'pair':'Lion'},
{'word':'Sophie', 'pair':'Lotta'},
{'word':'Jannes', 'pair':'Stubbi'},
{'word':'Martin', 'pair':'Wolle'},
{'word':'Flo', 'pair':'Ign'},
{'word':'Rere', 'pair':'Rose'},
{'word':'Jean', 'pair':'Tamara'},
{'word':'Memo', 'pair':'Elk'},
{'word':'Nila', 'pair':'Naph'}
]
On my HTML template I have two input lists wherein I am supposed to enter few of the combinations from above array and if the combination is correct then there will be a green checkmark.
My HTML looks like following as of now:
<!-- Level 2 Enter view for words for corresponding pairs -->
<div class="col col-50" ng-if="enterTextViewLeft">enterTextViewLeft
<ion-list>
<ion-item ng-repeat="item in randomWord_pair" id="list_two">
<input placeholder="Type here" ng-model="word" type="text" ng-change="leftPartnerCheck(word,item.pair)">
<div ng-show="showPartner[word]" align="right"><i class="ion-checkmark myCheckmark"></i></div>
</ion-item>
</ion-list>
</div>
<!-- Level 1 Enter view for pairs for corresponding words -->
<div class="col col-50" ng-if="enterTextViewRight">enterTextViewRight
<ion-list>
<ion-item ng-repeat="item in randomWord_pair" id="list_two">
<input placeholder="Type here" ng-model="pair" type="text" ng-change="rightPartnerCheck(pair,item.word)">
<div ng-show="showPartner[pair]" align="right"><i class="ion-checkmark myCheckmark"></i></div>
</ion-item>
</ion-list>
</div>
Screenshot of how it actually looks (this is from level 1 of the game, for level 6 instead of word list in left side, input list will be there too, so basically left and right input list to fill in any combination from above array in any order):
UPDATE:
I have couple of functions as well:
$scope.rightPartnerCheckList = {};
for(var v in $scope.randomWord_pair){
$scope.expectedPairSequece.push($scope.randomWord_pair[v].pair)
$scope.rightPartnerCheckList[$scope.randomWord_pair[v].word] = $scope.randomWord_pair[v].pair;
}
$scope.leftPartnerCheckList = {};
for(var v in $scope.randomWord_pair){
$scope.expectedWordSequece.push($scope.randomWord_pair[v].word)
$scope.leftPartnerCheckList[$scope.randomWord_pair[v].pair] = $scope.randomWord_pair[v].word;
}
$scope.showPartner = {};
$scope.rightPartnerCheck = function(p,i_p){
if($scope.rightPartnerCheckList[i_p] == p){
$scope.showPartner[p] = true;
if($scope.enteredSequence.indexOf(p)==-1){
$scope.enteredSequence.push(p)
}
}
}
$scope.leftPartnerCheck = function(w,i_w){
if($scope.leftPartnerCheckList[i_w] == w){
$scope.showPartner[w] = true;
if($scope.enteredSequence.indexOf(w)==-1){
$scope.enteredSequence.push(w)
}
}
}
How can I implement such a logic (for two input lists and checking for existing combinations in array) or incorporate in my existing logic?
I have created an example of how to do this and I will explain below:
HTML:
<div ng-controller="MyCtrl">
<table>
<tr ng-repeat="w in word_pair">
<td> <input type="text" ng-model="guesses[$index]"> </td>
<td> <input type="text" ng-model="otherguesses[$index]"> </div> </td>
<td> <input type="checkbox" ng-checked="check(guesses[$index], otherguesses[$index])" disabled> </td>
</tr>
</table>
</div>
AngularJS:
$scope.word_pair = [
{'word':'Carla', 'pair':'Lion'},
{'word':'Sophie', 'pair':'Lotta'},
{'word':'Jannes', 'pair':'Stubbi'},
{'word':'Martin', 'pair':'Wolle'},
{'word':'Flo', 'pair':'Ign'},
{'word':'Rere', 'pair':'Rose'},
{'word':'Jean', 'pair':'Tamara'},
{'word':'Memo', 'pair':'Elk'},
{'word':'Nila', 'pair':'Naph'}
];
$scope.guesses = [];
$scope.otherguesses = [];
$scope.check = function(word, pair) {
for(var i=0; i<$scope.word_pair.length; i++) {
if($scope.word_pair[i].word == word && $scope.word_pair[i].pair == pair) {
return true;
}
}
}
Use ng-repeat for every object inside the array word_pair
Create inputs and checkbox for each object
Create an arrays ($scope.guesses and $scope.otheruesses) and store the user input there (ng-model="guesses[$index]" and ng-model="otherguesses[$index]")
$index is the current index of ng-repeat which is associated with the index inside word_pair
Check if they match (check(guesses[$index], otherguesses[$index]))
You can check for duplicates inside check if you wish.
CodePen: http://codepen.io/theblindprophet/pen/zBRNmN

ng-value doesnt submit the right value

here's my view
div class="mdl-cell--12-col chat__list" >
<div class="mdl-cell--12-col" ng-repeat="listRoom in itemsList track by $index">
<ul>
Channel name : {{listRoom[0]}}
<li ng-repeat="x in listRoom[1]" >
<p>MESSAGE : {{x.message_text}}
</div>
</li>
</ul>
<form name="haha{{$index}}">
<input type="hidden" type="text" ng-model="item.admin_id" />
<input type="hidden" type="text" ng-value="item.channel_name = listRoom[0]" ng-model="item.channel_name "/>
<textarea ng-keydown="$event.which === 13 && addRoom()" placeholder="Type Your Message Here" ng-model="item.message_text"></textarea>
<button class="send__chat col-lg-2 pull-right" ng-click="addRoom()">Send</button>
{{item | json }}
</form>
</div>
Here's example my controller
$scope.itemsList =[{
"blp-crdtcrd-46": {
"message_text": "hai",
},
"blp-crdtcrd-47": {
"message_text": "halo",
}, "blp-crdtcrd-48": {
"message_text": "what",
},
}];
$scope.item={};
$scope.addRoom = function(){
$scope.item.admin_id = 1;
$scope.item.user_id = 0;
chatService.AddChat($scope.item);
}
My problem is every time i submit the form ,the ng-value of item.channel_name always submit blp-crdtcrd-48 and not dynamic,i have 3 channels in my array , and it always submit blp-crdtcrd-48 .I'm using {{ item | json }} to show the ng-value before submit and it show the corret value , when i'm hit the submit button the value result always blp-crdtcrd-48
help me and i'm appreciate all ur comment and help thank you very much

AngularJS filtering in multiple arrays

I'm trying to apply filter on a list of objects but I can't manage to make it work. I've read that AngularJS does not provide "out of box" multiples objects filtering, may be that's why it's not working?
Here is my code:
<div class="list list-inset">
<label class="item item-input" id="events-search">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Rechercher parmis les evenements" ng-model="nsearch">
</label>
</div>
<div class="list">
<a class="item item-thumbnail-left" href="#" ng-repeat="info in infos | filter:nsearch">
<img src="xxx">
<h2>{{ info.name }}</h2>
<p>{{ info.date}} à {{ info.hour }}</p>
</a>
</div>
For example, "infos" value would be something like:
Q5PAvIQ2x8TLNkZmhTr59s984ALI5s10 {
name: "This is an event",
...
},
jj8oB6WemYVsGZ1FSm31DFBtSlM0pfZK {
name: "This is a second event",
...
}
I'm trying to filter by name.
Does anyone have an idea?... thanks!
If your data is in a hash table rather than an actual array then you need to use the key, value notation for accessing the data in a ng-repeat:
<a class="item item-thumbnail-left" href="#" ng-repeat="(key, value) in searchedInfos()">
<h2>{{ value.name }}</h2>
</a>
In such arrangement angular's filter can not be simply applied to a non array set, so you have a create a custom filtering function on the your scope which would take it's value from a an input:
<input type="text" ng-model="view.searchStr"/>
and on the scope:
$scope.infos = {
Q5PAvIQ2x8TLNkZmhTr59s984ALI5s10: {
name: "This is an event"
},
jj8oB6WemYVsGZ1FSm31DFBtSlM0pfZK: {
name: "This is a second event"
}
};
$scope.view = {
searchStr : ""
}
$scope.searchedInfos = function(){
var searched = {};
if ($scope.view.searchStr) {
angular.forEach($scope.infos, function(value, key){
if (value.name.toLowerCase().indexOf($scope.view.searchStr.toLowerCase()) != -1) {
searched[key] = value;
}
});
}
else {
searched = $scope.infos;
}
return searched;
}
Here is a working fiddle
if infos will be an array of objects and you want to filter by the name not all the object variables in the system so all you need to do is to convert the search variable to be an object and but in it the same variable name that you want to search with
in your code you only need to convert the ng-model of the input to be like this
<input type="text" placeholder="Rechercher parmis les evenements" ng-model="nsearch.name">
and complete the rest of the code as it is
As the name is variable and unusable in a repeat you could reference by index
<h2>{{ info[0].name }}</h2>
<p>{{ info[0].date}} à {{ info[0].hour }}</p>
In your 'something like this' json array you probably need a comma
[Q5PAvIQ2x8TLNkZmhTr59s984ALI5s10 , {
name: "This is an event",
...},
jj8oB6WemYVsGZ1FSm31DFBtSlM0pfZK , {
name: "This is a second event",
...},
...]
, each info element will only has 1 element and can be referenced with [0]

How to get dynamic ng-model from ng-repeat in javascript?

I'm developoing a web app and stuck here:
Part of the HTML:
<div class="input-group">
<select name="select" class="form-control input-group-select" ng-options="key as key for (key , value) in pos" ng-model="word.pos" ng-change="addPos()">
<option value="">Choose a POS</option>
</select>
<span class="sort"><i class="fa fa-sort"></i></span>
</div>
<ul class="listGroup" ng-show="_pos.length > 0">
<li class="list" ng-repeat="item in _pos track by $index">
<span>
{{item.pos}}
<span class="btn btn-danger btn-xs" ng-click="delPos($index)">
<span class="fa fa-close"></span>
</span>
</span>
<!-- I wanna add the input which can add more list item to the item.pos-->
<div class="input-group">
<a class="input-group-addon add" ng-class=" word.newWordExp ? 'active' : ''" ng-click="addItemOne()"><span class="fa fa-plus"></span></a>
<input type="text" class="form-control exp" autocomplete="off" placeholder="Add explanation" ng-model="word.newWordExp" ng-enter="addExpToPos()">
{{word.newWordExp}}
</div>
</li>
</ul>
Part of the js:
$scope._pos = [];
$scope.addPos = function () {
console.log("You selected something!");
if ($scope.word.pos) {
$scope._pos.push({
pos : $scope.word.pos
});
}
console.dir($scope._pos);
//console.dir($scope.word.newWordExp[posItem]);
};
$scope.delPos = function ($index) {
console.log("You deleted a POS");
$scope._pos.splice($index, 1);
console.dir($scope._pos);
};
$scope.addItemOne = function (index) {
//$scope.itemOne = $scope.newWordExp;
if ($scope.word.newWordExp) {
console.log("TRUE");
$scope._newWordExp.push({
content: $scope.word.newWordExp
});
console.dir($scope._newWordExp);
$scope.word.newWordExp = '';
} else {
console.log("FALSE");
}
};
$scope.deleteItemOne = function ($index) {
$scope._newWordExp.splice($index, 1);
};
So, what am I wannt to do is select one option and append the value to $scope._pos, then display as a list with all of my selection.
And in every list item, add an input filed and add sub list to the $scope._pos value.
n.
explanation 1
explanation 2
explanation 3
adv.
explanation 1
explanation 2
So I don't know how to generate dynamic ng-model and use the value in javascript.
Normaly should like ng-model="word.newExplanation[item]" in HTML, but in javascript, $scope.word.newExplanation[item] said "item is not defined".
can any one help?
If I've understood it correclty you could do it like this:
Store your lists in an array of object this.lists.
The first object in the explanation array is initialized with empty strings so ng-repeat will render the first explanation form.
Then loop over it with ng-repeat. There you can also add dynamically the adding form for your explanation items.
You can also create append/delete/edit buttons inside the nested ng-repeat of your explanation array. Append & delete is already added in the demo.
Please find the demo below or in this jsfiddle.
angular.module('demoApp', [])
.controller('appController', AppController);
function AppController($filter) {
var vm = this,
explainTmpl = {
name: '',
text: ''
},
findInList = function (explain) {
return $filter('filter')(vm.lists, {
explanations: explain
})[0];
};
this.options = [{
name: 'option1',
value: 0
}, {
name: 'option2',
value: 1
}, {
name: 'option3',
value: 2
}];
this.lists = [];
this.selectedOption = this.options[0];
this.addList = function (name, option) {
var list = $filter('filter')(vm.lists, {
name: name
}); // is it in list?
console.log(name, option, list, list.length == 0);
//vm.lists
if (!list.length) {
vm.lists.push({
name: name,
option: option,
explanations: [angular.copy(explainTmpl)]
});
}
};
this.append = function (explain) {
console.log(explain, $filter('filter')(vm.lists, {
explanations: explain
}));
var currentList = findInList(explain);
currentList.explanations.push(angular.copy(explainTmpl));
}
this.delete = function (explain) {
console.log(explain);
var currentList = findInList(explain),
index = currentList.explanations.indexOf(explain);
if (index == 0 && currentList.explanations.length == 1) {
// show alert later, can't delete first element if size == 1
return;
}
currentList.explanations.splice(index, 1);
};
}
AppController.$inject = ['$filter'];
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="appController as ctrl">
<select ng-model="ctrl.selectedOption" ng-options="option.name for option in ctrl.options"></select>
<input ng-model="ctrl.listName" placeholder="add list name" />
<button class="btn btn-default" title="add list" ng-click="ctrl.addList(ctrl.listName, ctrl.selectedOption)"><i class="fa fa-plus"></i>
</button>
<div class="list-group">Debug output - current lists:<pre>{{ctrl.lists|json:2}}</pre>
<div class="list-group-item" ng-repeat="list in ctrl.lists">
<h2>Explanations of list - {{list.name}}</h2>
<h3>Selected option is: {{ctrl.selectedOption}}</h3>
<div class="list-group" ng-repeat="explain in list.explanations">
<div class="list-group-item">
<p class="alert" ng-if="!explain.title">No explanation here yet.</p>
<div class="well" ng-if="explain.title || explain.text">
<h4>
{{explain.title}}
</h4>
<p>{{explain.text}}</p>
</div>Title:
<input ng-model="explain.title" placeholder="add title" />Text:
<input ng-model="explain.text" placeholder="enter text" />
<button class="btn btn-primary" ng-click="ctrl.append(explain)">Append</button>
<button class="btn btn-primary" ng-click="ctrl.delete(explain)">Delete</button>
</div>
</div>
</div>
</div>
</div>

Resources