チェックボックスが選択されているときに注文リストのフォントの色を変更するにはどうすればよいですか？

debugcn 投稿 Dev

プラサド

カーリストのチェックボックスとチェックボックスをオフにしてリストを開発していますが、リストは配列にあり、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>

チェックボックスを選択すると、結果がリストになります。リストフォントは色を変更する必要があり、配列リストで別のチェックボックスを無効にする必要があります。

ムハンマドハッサン

AngularJSを正しい方法で使用していません。あなたが直面している問題は、各車の各入力のIDが同じであるためです。以下はあなたの問題のための実用的なコードです。

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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]