Utilizing angularjs, I have two lists. When the first one is clicked, the value will be pushed into another scope and bound to the second list. Now, my goal is to change the color of the values moved from the first list to the second list in list1.
Check out my fiddle for reference: Fiddle
If you wish to apply a CSS class to the first list item when it contains the same item as the second list, you can utilize a combination of findIndex and ng-class.
In JavaScript:
$scope.checkColor = function(text) {
var index = $scope.linesTwos.findIndex(x => x.text === text);
if (index > -1) return true;
else return false;
}
In HTML:
<li ng-click="Team($index,line.text)" ng-class="{'change-color':checkColor(line.text)}">{{line.text}}</li>
See a Working Demo here: https://jsfiddle.net/7MhLd/2659/
Here is an example of how you can achieve this:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.lines = [{
text: 'result1'
},
{
text: 'result2'
},
{
text: 'result3'
}
];
$scope.linesTwos = [];
$scope.Team = function(index, text) {
var obj = {};
obj.text = text;
$scope.linesTwos.push(obj)
}
$scope.Team2 = function(index, text2) {
$scope.linesTwos.splice(index, 1)
}
$scope.containsObj = function(obj, list) {
var i;
for (i = 0; i < list.length; i++) {
if (angular.equals(list[i], obj)) {
return true;
}
}
return false;
};
}.clicked {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<ul ng-repeat="line in lines">
<li ng-class="{'clicked': containsObj(line,linesTwos)}" ng-click="Team($index,line.text)">{{line.text}}</li>
</ul>
<ul>
<li>__________</li>
</ul>
<ul ng-repeat="line in linesTwos">
<li ng-click="Team2($index,line.text)">{{line.text}}</li>
</ul>
</div>To achieve this, you can use ng-class to create a dynamic class style for the pushed data. Feel free to check out my working example on JS fiddle: JS fiddle sample
For HTML:
<li ng-click="Team($index,line.text,line)" ng-class="{'pushed':line.pushed}">
<li ng-click="Team2($index,line.text,line)">
In CSS:
.pushed{color:red;}
In Controller:
`$scope.Team=function(index,text,line){
var obj={};
obj = line;
$scope.linesTwos.push(obj)
line.pushed = true;
}`
`scope.Team2 = function(index,text2,line){
$scope.linesTwos.splice(index,1)
line.pushed = false;
}
`
This is necessary due to Angular's two-way binding feature.
I have been experimenting with this code snippet on jsfiddle: http://jsfiddle.net/SSSUUUSSS/Bsusr/1/.. It is utilizing angularjs-ui. <tbody ui:sortable ng:model="list"> <tr ng:repeat="item in list" class="item" style="cursor: move;"> ...
I'm having some trouble selecting a date from a date picker field using JavaScript in Selenium WebDriver. I've attempted the code below, which does navigate to the date window successfully, but I can't figure out how to execute the JavaScrip ...
I have been working with an ajax function to retrieve names from the database. The issue arises when there are multiple names returned - I split them and then attempt to clone the first class in order to display the additional names. However, this proces ...
How can I create a new constructor that will alert the increment value? Any suggestions on how to achieve this? This is the current code snippet: var increment = new Increment(); alert(increment); /* 1 */ alert(increment); /* 2 */ alert(increment + incr ...
In my AngularJS project, I am working on an account details page where users can update their personal information. The interface allows for multiple phone numbers and email addresses to be added. Currently, the functionality works well with mouse input or ...
I am working on a project for school where I am creating an SFTP client directly in my browser. I have successfully implemented the node package ssh2 and it works perfectly when running the code in the terminal. I can connect to the server, read directorie ...
Hi there! I'm working on a project for my school and could really use your expertise. I need help extracting a substring from a URL, like this one: URL = https://www.example.com/blah/blah&code=12432 The substring is: 12432 I also want to display ...
Running Express on my application, I have a delete route set up as shown below: router.route('/lists/:id') .delete(function(req, res){ Entry.remove({ _id: req.params.id }, function(err, list){ if(err) ...
I am struggling with making a JSON Ajax request and receiving an array in return. After browsing through multiple questions, I came across this code snippet that I edited to fit my problem: var hej[]; function ajax_search(){ $.getJSON('test.php ...
How can I create a colorbox link that prompts the user for permission to access their location, and if granted, displays a map with directions from their current location? I've managed to get it partially working, but there's an issue when the us ...
I followed the instructions in the Ionic 2 menu documentation and tried to display the menu in a specific way: https://i.sstatic.net/zzm8f.png My intention was to have the menu displayed below the content page while keeping the menu button visible. Howe ...
Is there a way to correctly pass an array to the firebase firestore arrayUnion() function? I encountered an issue while attempting to pass an array and received the following error message: Error Error: 3 INVALID_ARGUMENT: Cannot convert an array value ...
After placing the jquery.placeholder.js file in the assets/javascripts folder, I successfully applied the function in my coffeescript file and it worked perfectly. $(document).ready -> $('input, textarea').placeholder(); However, when swit ...
When I click a button, the image on the screen disappears. I am looking to add a fade effect to this action. Can someone help me achieve this using CSS? #hide{-webkit-transition: all 1s ease-in-out;} For reference, here is a demo showcasing the current b ...
Below is the Express code snippet I have for the GET method: const express = require('express'); const app = express(); app.get('/', function(req, res) { res.sendFile(path.join(__dirname, '../public/index.html')); }); app ...
After stumbling upon a question on StackOverflow discussing the number of parameters in JavaScript functions (How many parameters are too many?), I started pondering if there is a real limitation on how many parameters a JS function can have. test(65536 ...
In my Angular 6 app, I have a class that attaches API tokens to every http request using the getIdToken() method. If the token retrieval is successful, everything works fine. However, if it fails, my app will stop functioning. I need help with handling th ...
Experiencing errors while trying to retrieve thermostat ambient Temperature with cylon.js I have already replaced ACCESS_TOKEN with my unique access token and device id Sample Code: var Cylon = require('cylon'); Cylon.robot({ connections: { ...
I am encountering an issue with my nodejs application. It is sending responses with the header set as application/json. The client successfully receives a 200 OK status in response to its http ajax request, and I can also view the JSON response from the Re ...
I'm fairly new to jQuery and encountering difficulties in capturing button click events in jQuery from buttons created within an ItemTemplate in an ASP Repeater. Despite spending several hours searching for a solution, I haven't been successful ...