Cross check input check box values against an array in angular - angularjs

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

Related

AngularJS dynamic form input with fieldset via ng-repeat

Please click on the demo below
www.jsfiddle.net/rnnb32rm/1370
My problem is: "Add input" is working fine. But whenever i invoke "Add
Fields", the subsequent field will be sync with the first one. I want
the subsequent to be filled with only one input. Stuck for hours already. Please guide!
Picture to illustrate:
May be help you.
var app = angular.module("app",[]);
app.controller("MyCtrl" , function($scope){
$scope.data ={
items:[{ name:"",family:"",age:""}]
};
$scope.addRow = function(index){
var item = { name:"",family:"",age:""};
if($scope.data.items.length <= index+1){
$scope.data.items.splice(index+1,0,item);
}
};
$scope.deleteRow = function($event,item){
var index = $scope.data.items.indexOf(item);
if($event.which == 1)
$scope.data.items.splice(index,1);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<table>
<tr ng-repeat="name in data.items track by $index">
<td> <input type="text" ng-model="data.items[$index].name"></td>
<td> <input type="text" ng-model="data.items[$index].family"></td>
<td> <input type="text" ng-model="data.items[$index].age"></td>
<td> <input type="button" ng-click="addRow($index)" value="Add" ng-show="$last"></td>
<td> <input type="button" ng-click="deleteRow($event,name)" value="Delete" ng-show="$index != 0"></td>
</tr>
</table>
<span>{{data|json}}</span>
</div>
I answered this the first time you posted this question, but you deleted it.
You only have one choices array, and you are using it over and over:
$scope.addNewChoice = function() {
// ...
// Same array each time
$scope.choices.push({'id':'choice'+newItemNo});
};
<fieldset data-ng-repeat="choice in choices2">
<div data-ng-repeat="choice in choices "> <!-- Same array each time -->
You probably want one array for each entry in the choices2 array.
Also, both of your ng-repeat elements use the same variable name (choice) which is confusing.

Angular checkmark for list elements

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

How do I make a quick refference in angularjs between generated items with ng-repeat?

First of all I am new to angularjs.
I want to make a simple / quick refference betweeen my anchors and paragraphs>inputs, depending on what I clicked in my angular web app.
I generate 3 table rows with 1 table data with the ng-repeat. After this, when I click one of the anchors my toggleDetails(todo.id,todo.nume,todo.prenume) triggers and I update my next below input values (#inputId, #inputNume, #inputPrenume) with basic javascript. I feel like I m doing it hard way. Can I use less code like some angularjs directives ?(I`m using a Yeoman framework) So, this is my HTML:
<div class="container" controller="AboutCtrl">
<h2>Lista persoane</h2>
<table>
<tr>
<th>Nume si prenume</th>
</tr>
<tr class="form-group " ng-repeat="todo in todos">
<td>
<a href ng-click="toggleDetails(todo.id,todo.nume,todo.prenume)">
<input type="text" ng-model="todo.nume" class="form-control">
</a>
</td>
</tr>
</table>
<div ng-hide="hideDetails">
<p>Id:<input type="text" id="inputId"/></p><br>
<p>Nume:<input type="text" id="inputNume"/></p><br>
<p>Prenume:<input type="text" id="inputPrenume"/></p><br>
</div>
</div>
About.js file
.controller('AboutCtrl', function ($scope, AfisareDateService) {
$scope.todos = [{
id: 1,
nume: 'name1',
prenume: 'name2'},{
id: 2,
nume: 'name3',
prenume: 'nam4'}, {
id: 3,
nume: 'name5',
prenume: 'name6'
}];
$scope.hideDetails = true;
$scope.toggleDetails = function(id,nume,prenume) {
$scope.hideDetails = !$scope.hideDetails;
var x = document.getElementById('inputId');
var y = document.getElementById('inputNume');
var z = document.getElementById('inputPrenume');
x.value = id;
y.value = nume;
z.value = prenume;
});
few changes
$scope.toggleDetails = function(todo) {
$scope.hideDetails = !$scope.hideDetails;
$scope.selectedTodo = todo
});
and use ng-model
<p>Id:<input type="text" ng-model="selectedTodo.id"/></p><br>
In html change parameter of toggledetail
<tr class="form-group " ng-repeat="todo in todos">
<td>
<a href ng-click="toggleDetails(todo)">
<input type="text" ng-model="todo.nume" class="form-control">
</a>
<div ng-show="Object.keys(selectedTodo).length>0">
<p>Id:<input ng-model="selectedTodo.id type="text" id="inputId"/></p><br>
<p>Nume:<input ng-model="selectedTodo.name" type="text" id="inputNume"/></p><br>
<p>Prenume:<input ng-model="selectedTodo. prenume" type="text" id="inputPrenume"/></p><br>
</div>
</div>
In controller
$scope.selectedTodo ={} //take variable
$scope.toggleDetails = function(todo) {
$scope.selectedTodo = todo;

AngularJS select value from options and add to array

I am new with AngularJS. I want to add values into array and display those in table after clicking on Save button.
One is select Menu and other is TextBox. Presently, I am able to add text value but not able to get selected value.
Here is what I have:
clusterController.js
apsApp.controller('clusterController', function ($scope) {
var uid = 4;
$scope.clusters=[
{id:0, 'environment':'DEV', 'cluster':'cluster1'},
{id:1, 'environment':'PROD', 'cluster':'cluster2'},
{id:2, 'environment':'QA', 'cluster':'cluster3'},
{id:3, 'environment':'Linux_Dev', 'cluster':'cluster4'}
];
//add new cluster
$scope.saveNewClust = function() {
if($scope.clust.id == null) {
//if this is new contact, add it in contacts array
$scope.clust.id = uid++;
$scope.clusters.push($scope.clust);
}
else {
//for existing contact, find this contact using id
//and update it.
for(i in $scope.clusters) {
if($scope.clusters[i].id == $scope.clust.id) {
$scope.clusters[i] = $scope.clust;
}
}
};
//clear the add contact form
$scope.clust = {};
};
//delete cluster
$scope.remove = function(id) {
//search contact with given id and delete it
for(i in $scope.clusters) {
if($scope.clusters[i].id == id) {
confirm("This Cluster will get deleted permanently");
$scope.clusters.splice(i,1);
$scope.clust = {};
}
}
};
$scope.edit = function(id) {
//search contact with given id and update it
for(i in $scope.clusters) {
if($scope.clusters[i].id == id) {
//we use angular.copy() method to create
//copy of original object
$scope.clust = angular.copy($scope.clusters[i]);
}
}
};
});
cluster.html
<div class="maincontent">
<div class="article">
<form>
<section>
<!-- Environment -->
<div class="col-md-6">
<label>Environment:</label>
<select ng-model="selectedEnvi" class="form-control" ng-options="clust.environment for clust in clusters">
<option value='' disabled selected style='display:none;'>
Select Environment
</option>
</select>
</div>
<!-- cluster Name -->
<div class="col-md-6">
<label>Cluster Name:</label>
<input type="text" class="form-control" name="clusterName" placeholder="Cluster" ng-model="clust.cluster" required>
<br/>
<input type="hidden" ng-model="clust.id" />
</div>
</section>
<!-- submit button -->
<section class="col-md-12">
<button type="button" class="btn btn-default pull-right" ng-click="saveNewClust()">Save Cluster</button>
</section>
</form>
</div>
<!-- table -->
<div class="article">
<table class="table table-bordered table-striped">
<tr>
<th colspan="3">
<div class="pull-left">Cluster Info</div>
</th>
</tr>
<tr>
<th>#</th>
<th>Environment</th>
<th>Cluster</th>
</tr>
<tr ng-repeat="clust in clusters">
<td>{{}}</td>
<td>{{clust.environment}}</td>
<td>{{clust.cluster}}</td>
</tr>
</table>
</div>
</div>
First of all, make an own array for the possible selections of the environment selections. Right now you get the possible values from an existing list of clusters (you can leave it like this of course, but I find it confusing!). Let's just go with the following:
$scope.environments = [
{name: 'DEV',},
{name: 'PROD',},
{name: 'QA',},
{name: 'Linux_Dev'}
];
Furthermore, you need to preselect an environment in ngModel for the select values. We need to do this, because after the page is loaded, the select box maybe shows "DEV", but it doesn't set the ngModel to "DEV". It only updates the ngModel after manually selecting a value.
Set it like this:
$scope.selectedEnvironment = $scope.environments[0];
This sets the model "selectedEnvironment" to {name: "Dev"}.
The selection box:
<select ng-model="selectedEnvironment" class="form-control" ng-options="environment.name for environment in environments">
<option disabled value="">-- choose environment --</option>
</select>
I set the model to "selectedEnvironment", so the preselection from the controller will work. I also changed hg-options to use the JSON which contains the environment names.
The last thing to do is a minor change on the "saveNewClust" function:
if ($scope.clust.id == null) {
//if this is new contact, add it in contacts array
$scope.clust.id = uid++;
$scope.clust.environment = $scope.selectedEnvironment.name;
$scope.clusters.push($scope.clust);
}
What happens: We just give the name of the environment to $scope.clust.environment.
I made a fiddle containing the working demo:
http://jsfiddle.net/hs6Rz/9/

AngularJS update table data

I have to create a simple CRUD page with AngularJS.
I am able to add data with save button. Now when clicked on edit link form should get filled with the values with the row value. I am using angular's '.copy' object to get data into form.
For now text box getting valuse successfully but the select box not updating. And also want to make the select menu disable once clicked on edit link.
Below is the code:
apsApp.controller('clusterController', function ($scope ) {
var uid = 1;
$scope.clusters=[
{id:0, 'cluster':''},
];
$scope.environments = [
{name: 'DEV'},
{name: 'PROD'},
{name: 'QA'},
{name: 'Linux_Dev'}
];
$scope.selectedEnvironment = $scope.environments[0];
//add new cluster
$scope.saveNewClust = function() {
if($scope.clust.id == null) {
//if this is new cluster, add it in clusters array
$scope.clust.id = uid++;
$scope.clust.environment = $scope.selectedEnvironment.name;
console.log($scope.clust);
$scope.clusters.push($scope.clust);
}
else {
//for existing cluster, find this cluster using id and update it.
for(i in $scope.clusters) {
if($scope.clusters[i].id == $scope.clust.id) {
$scope.clusters[i] = $scope.clust;
}
}
};
//clear the add clusters form
$scope.clust = {};
};
//delete cluster
$scope.remove = function(id) {
//search cluster with given id and delete it
for(i in $scope.clusters) {
if($scope.clusters[i].id == id) {
confirm("This Cluster will get deleted permanently");
$scope.clusters.splice(i,1);
$scope.clust = {};
}
}
};
$scope.edit = function(id) {
//search cluster with given id and update it
for(i in $scope.clusters) {
if($scope.clusters[i].id == id) {
//we use angular.copy() method to create copy of original object
$scope.clust = angular.copy($scope.clusters[i]);
}
}
};
});
HTML Template is:
<div class="menuContent">
<div class="maincontent">
<div class="article">
<form>
<section>
<!-- Environment -->
<div class="col-md-6">
<label>Environment:</label>
<select ng-model="selectedEnvironment" class="form-control" ng-options="environment.name for environment in environments">
<option value='' disabled style='display:none;'>
Select Environment
</option>
</select>
</div>
<!-- cluster Name -->
<div class="col-md-6">
<label>Cluster Name:</label>
<input type="text" class="form-control" name="clusterName" placeholder="Cluster" ng-model="clust.cluster" required>
<br/>
<input type="hidden" ng-model="clust.id" />
</div>
</section>
<!-- submit button -->
<section class="col-md-12">
<button type="button" class="btn btn-default pull-right" ng-click="saveNewClust()">Save Cluster</button>
</section>
</form>
</div>
<!-- table -->
<div class="article">
<table class="table table-bordered table-striped">
<tr>
<th colspan="4">
<div class="pull-left">Cluster Info</div>
</th>
</tr>
<tr>
<th>#</th>
<th>Environment</th>
<th>Cluster</th>
<th>Edit</th>
</tr>
<tr ng-repeat="clust in clusters">
<td>{{}}</td>
<td>{{clust.environment}}</td>
<td>{{clust.cluster}}</td>
<td>
<span class="glyphicon glyphicon-edit" ></span> |
<span class="glyphicon glyphicon-trash"></span>
</td>
</tr>
</table>
</div>
</div>
</div>
I went over your code and changed a lot. Here is the new javascript part:
var app = angular.module('myApp', []);
app.controller('clusterController', function ($scope) {
var uid = 0;
$scope.clusters = [];
$scope.environments = [
{name: 'DEV'},
{name: 'PROD'},
{name: 'QA'},
{name: 'Linux_Dev'}
];
$scope.select = {};
$scope.select.selectedEnvironment = $scope.environments[0];
$scope.select.buttonLabel = 'Save Cluster';
$scope.select.showCancel = false;
//add new cluster
$scope.saveNewClust = function () {
if ($scope.select.id == undefined) {
//if this is new cluster, add it in clusters array
$scope.clusters.push({
id: uid++,
cluster: $scope.select.cluster,
environment: $scope.select.selectedEnvironment
});
} else {
//for existing cluster, find this cluster using id and update it.
$scope.clusters[$scope.select.id].cluster = $scope.select.cluster;
$scope.select.id = undefined;
$scope.select.buttonLabel = 'Save Cluster';
$scope.select.showCancel = false;
};
//clear the add clusters form
$scope.select.cluster = "";
$scope.select.selectedEnvironment = $scope.environments[0];
};
//delete cluster
$scope.remove = function (id) {
//search cluster with given id and delete it
for (i in $scope.clusters) {
if ($scope.clusters[i].id == id) {
confirm("This Cluster will get deleted permanently");
$scope.clusters.splice(i, 1);
$scope.clust = {};
}
}
};
$scope.cancelUpdate = function () {
$scope.select.buttonLabel = 'Save Cluster';
$scope.select.showCancel = false;
$scope.select.id = undefined;
$scope.select.cluster = "";
$scope.select.selectedEnvironment = $scope.environments[0];
};
});
First of all, set the var uid to 0. Don't start from 1, because the array, which you want to check starts also indexing from 0. Secondly, I added an object which persists the data for the form, where the user chooses the environment and types the name for the cluster. The object is assigned to $scope.select. There we save the preselect environment for the select box. I also save the name "Save Cancel" here, because I made it so after editing one cluster, the label of the button changes from "Save Cluster" to "Update Cluster". Like this your users will know, when exactly they edit a cluster or when they add a cluster. Furthermore, while editing a cluster, another button Cancel Update appears, so the user can also stop editing a cluster. If this button should show or not is saved in $scope.select.showCancel.
The saveNewClust function handles both routines, one for saving and one for updating. The function for editing is therefore removed. I added another function cancelUpdate, which is called in case the user cancels the action.
This is the HTML part. I just updated the form to use the new select object and the ng-click routine when the user clicks on edit. The select box is now surrounded with ng-switch. If the user edits an existing cluster, the select box is disabled.
<div ng-controller="clusterController" class="menuContent">
<div class="maincontent">
<div class="article">
<form>
<section>
<!-- Environment -->
<div class="col-md-6">
<label>Environment:</label>
<span ng-switch on="select.showCancel">
<select ng-switch-when="true" disabled ng-model="select.selectedEnvironment" class="form-control"
ng-options="environment.name for environment in environments">
<option value='' disabled style='display:none;'>
Select Environment
</option>
</select>
<select ng-switch-default ng-model="select.selectedEnvironment" class="form-control"
ng-options="environment.name for environment in environments">
<option value='' disabled style='display:none;'>
Select Environment
</option>
</select>
</span>
</div>
<!-- cluster Name -->
<div class="col-md-6">
<label>Cluster Name:</label>
<input type="text" class="form-control" name="clusterName" placeholder="Cluster"
ng-model="select.cluster" required>
<br/>
<input type="hidden" ng-model="clust.id"/>
</div>
</section>
<!-- submit button -->
<section class="col-md-12">
<button type="button" class="btn btn-default pull-right" ng-click="saveNewClust()">{{select.buttonLabel}}
</button>
<button ng-show="select.showCancel" type="button" class="btn btn-default pull-right" ng-click="cancelUpdate()">Cancel update
</button>
</section>
</form>
</div>
<!-- table -->
<div class="article">
<table class="table table-bordered table-striped">
<tr>
<th colspan="4">
<div class="pull-left">Cluster Info</div>
</th>
</tr>
<tr>
<th>#</th>
<th>Environment</th>
<th>Cluster</th>
<th>Edit</th>
</tr>
<tr ng-repeat="clust in clusters">
<td>{{}}</td>
<td>{{clust.environment.name}}</td>
<td>{{clust.cluster}}</td>
<td>
<span class="glyphicon glyphicon-edit"></span>Edit
|
<a href="" ng-click="remove(clust.id)" title="Delete"><span
class="glyphicon glyphicon-trash"></span>Delete</a>
</td>
</tr>
</table>
</div>
</div>
</div>
Here is the jsfiddle for testing: http://jsfiddle.net/hv7Pb/

Resources