AngularJS: Как отобразить массив и если выбрано какое-либо значение, которое будет отображаться? - PullRequest
Новая
       4

AngularJS: Как отобразить массив и если выбрано какое-либо значение, которое будет отображаться?

0 голосов
/ 20 февраля 2019

помогите мне показать список данных из массива на странице загрузки, и если в раскрывающемся списке выбрано какое-либо значение, будет отображаться выбранное значение.

<!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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<style>
.text-red {
  color: red;
}

.text-green {
  color: green;
}

.text-black {
  color: black;
}
</style>
<script>
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;
}

});
</script>
<body>
 <div class="container-fluid" ng-app="myApp" ng-controller="myCtrl">
    <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li>
  <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>
</li>
    </ul>
  </div> 
</div>

</body>
</html>

enter image description here

помогите мне показать список данных из массива на странице загрузки, и если какое-либо значение выбрано в раскрывающемся списке, выбранное значение будетотображается.

1 Ответ

0 голосов
/ 22 февраля 2019

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

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;
}

p{margin:0 0 !important}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<div class="container-fluid" ng-app="myApp" ng-controller="myCtrl">
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li>
        <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>
      </li>
      </ul>
  </div>

<hr/>

<b>Selected: </b>
<div ng-repeat="x in car_obj">
 <p ng-if="!x.nonSelected"> {{x.name}} </p>
</div>
<!--
<br/>
<b>Not Selected:</b>
<div ng-repeat="x in car_obj">
 <p ng-if="x.nonSelected"> {{x.name}} </p>
</div>
-->
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...