Как изменить цвет шрифта в списке заказов, если установлен флажок? - PullRequest
Новая
       2

Как изменить цвет шрифта в списке заказов, если установлен флажок?

0 голосов
/ 02 января 2019

Я разрабатываю список с флажками и снимите флажок для списка и список был в массиве, и я не могу изменить цвет шрифта в списке, используя angularjs и html

это похоже на страницу параметров списка дел, в списке автомобилей будет установлен флажок "да" и "нет", но когда я попытался проверить и снять флажок, он работал для первого объекта в списке, пожалуйста, помогите мне сделать то же самое в списке 

<div ng-app="myApp" ng-controller="orderCtrl">
<ul style="list-style-type:none">
<li id="list" ng-repeat="x in cars | orderBy">
   <input type="checkbox" id="selected" ng-model="cars[x]" onchange="changeColor()"/> 
   <input type="checkbox" id="nonSelected" onchange="changeColor()"/>{{x}}</li>
</ul>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
    $scope.cars = ["Porsche", "Bentley", "Audi", "Ferrari", "BMW", "Ford"];
});
function changeColor()
{
    if(document.getElementById("nonSelected").checked==true){
        document.getElementById("list").style.color="red";
        document.getElementById("selected").disabled = true;
        return;
    }
    else if(document.getElementById("selected").checked==true){
        document.getElementById("list").style.color="green";
        document.getElementById("nonSelected").disabled = true;
        return;
    } else {
        document.getElementById("list").style.color="black";
        document.getElementById("selected").disabled = false;
        document.getElementById("nonSelected").disabled = false;
        return;
    }

}
</script>

результаты должны отображаться в списке, когда я установил флажок, шрифт списка должен изменить цвет, а другой флажок должен быть отключен в списке массивов

1 Ответ

0 голосов
/ 02 января 2019

Вы не используете AngularJS правильно.Проблема, с которой вы сталкиваетесь, заключается в том, что идентификаторы каждого входа для каждого автомобиля одинаковы.Ниже приведен рабочий код вашей проблемы. 

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = ["Porsche", "Bentley", "Audi", "Ferrari", "BMW", "Ford"];
$scope.cars.sort();
$scope.car_obj = [];
for (var i=0; i<$scope.cars.length; i++){
    $scope.car_obj.push({name: $scope.cars[i], selected: false, nonSelected: false}) 
}
$scope.getCheckedCount = function(type){
  return $scope.car_obj.filter(function(car){return car[type]}).length;
}
  
});
.text-red {
  color: red;
}

.text-green {
  color: green;
}

.text-black {
  color: black;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
  <div>selected: {{getCheckedCount('selected')}}</div>
  <div>nonSelected: {{getCheckedCount('nonSelected')}}</div>

<ul style="list-style-type:none">
<li id="list" ng-repeat="x in car_obj">
   <input type="checkbox" ng-model="x.selected" ng-disabled="x.nonSelected"/> 
  <input type="checkbox" ng-model="x.nonSelected" ng-disabled="x.selected"/><span ng-class="{'text-red': x.nonSelected, 'text-green': x.selected}">{{x.name}}</span></li>
</ul>

</div>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...