如何在angularjs中获取子元素

时间：2018-06-13 06:28:59

标签： javascript arrays angularjs

我正在进行多选“下拉”，我想在我的“下拉列表”中禁用该类别并对其进行不同的样式设置。所以我得到了选择元素，我想让那些类别禁用的孩子。我怎样才能让孩子们这样做。 到目前为止我已经这样做了：

"use strict";

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope, $http) {

  $scope.datas = [{
    "item": "South Korea",
    "category": "Asia",
    "flag": false
  }, {
    "item": "England",
    "category": "Europe",
    "flag": false
  }, {
    "item": "Japan",
    "category": "Asia",
    "flag": false
  }, {
    "item": "Denmark",
    "category": "Europe",
    "flag": false
  }, {
    "item": "North Korea",
    "category": "Asia",
    "flag": false
  }, {
    "item": "Geramany",
    "category": "Europe",
    "flag": false
  }, {
    "item": "China",
    "category": "Asia",
    "flag": false
  }, {
    "item": "Spain",
    "category": "Europe",
    "flag": false
  }, {
    "item": "India",
    "category": "Asia",
    "flag": false
  }, {
    "item": "Italy",
    "category": "Europe",
    "flag": false
  }, {
    "item": "Tailand",
    "category": "Asia",
    "flag": false
  }, {
    "item": "Portugal",
    "category": "Europe",
    "flag": false
  }];

  $scope.catCountainr = [];
  $scope.categorizedData = [];
  $scope.indexContainer = [];
  for (var i = 0; i < $scope.datas.length; i++) {
    if ($scope.catCountainr.indexOf($scope.datas[i].category) == -1) {
      $scope.catCountainr.push($scope.datas[i].category);
    }
  }
  for (var i = 0; i < $scope.catCountainr.length; i++) {
    $scope.categorizedData.push($scope.catCountainr[i]);
    $scope.indexContainer.push($scope.categorizedData.indexOf($scope.datas[i].category));
    for (var j = 0; j < $scope.datas.length; j++) {
      if ($scope.datas[j].category == $scope.catCountainr[i]) {
        $scope.categorizedData.push($scope.datas[j].item);
      }
    }
  }
  var select = angular.element(document.getElementById("select"));






});
<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
</head>

<body ng-controller="myCtrl">
  <div class="container">
    <form action="" class="">
      <div id="widgetContainer">
        <!--<input type="text" ng-click="openSelect()" class="input-control">
				<div id="selectContainer" ng-show="selectEnable">
					<div>{{selectedItems.toString()}}</div>
					<input type="text" id="searchField" ng-model="searchField" ng-change="filter()">
					<div id="listContainer">
						<ul id="innerContainer">
							<li ng-repeat="data in data2Show | orderBy: data.item" ng-model="data2show">
								<h4>{{data.category}}</h4>
								<input type="checkbox" ng-change="itemChecked(data)" name="select" ng-model="data.flag" ng-checked="isChecked(data)"> {{data.item}}
							</li>

							<div ng-show="dataLoading" ng-model="dataLoading">loading...</div>
							<li id="loadMore" ng-click="loadMore()">
								load more
							</li>

						</ul>
					</div>
				</div>-->

        <ul id="select">
          <li ng-repeat="key in categorizedData">{{ key }}</li>
        </ul>


      </div>
    </form>

  </div>
</body>

</html>

当我使用select.children()时，它无效

还有其他方法可以帮助这些孩子吗？ 提前谢谢你

1 个答案:

答案 0 :(得分：1)

这样做

render js: "window.location.replace('#{url}')"

＆＃13;
＆＃13; 
for (var i = 0; i < $scope.catCountainr.length; i++) {
    $scope.categorizedData.push({
      item: $scope.catCountainr[i],
      isDisabled: true
    });
    $scope.indexContainer.push($scope.categorizedData.indexOf($scope.datas[i].category));
    for (var j = 0; j < $scope.datas.length; j++) {
      if ($scope.datas[j].category == $scope.catCountainr[i]) {
        $scope.categorizedData.push({
          item: $scope.datas[j].item,
          isDisabled: false
        });
      }
    }
  }


 <ul id="select">
          <li ng-repeat="data in categorizedData" ng-class="{'diffColor': data.isDisabled}">{{ data.item }}</li>
        </ul>

.diffColor {
    background-color: wheat;
    pointer-events: none;
    user-select: none;
}
＆＃13; 
"use strict";

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope, $http) {

  $scope.datas = [{
    "item": "South Korea",
    "category": "Asia",
    "flag": false
  }, {
    "item": "England",
    "category": "Europe",
    "flag": false
  }, {
    "item": "Japan",
    "category": "Asia",
    "flag": false
  }, {
    "item": "Denmark",
    "category": "Europe",
    "flag": false
  }, {
    "item": "North Korea",
    "category": "Asia",
    "flag": false
  }, {
    "item": "Geramany",
    "category": "Europe",
    "flag": false
  }, {
    "item": "China",
    "category": "Asia",
    "flag": false
  }, {
    "item": "Spain",
    "category": "Europe",
    "flag": false
  }, {
    "item": "India",
    "category": "Asia",
    "flag": false
  }, {
    "item": "Italy",
    "category": "Europe",
    "flag": false
  }, {
    "item": "Tailand",
    "category": "Asia",
    "flag": false
  }, {
    "item": "Portugal",
    "category": "Europe",
    "flag": false
  }];

  $scope.catCountainr = [];
  $scope.categorizedData = [];
  $scope.indexContainer = [];
  for (var i = 0; i < $scope.datas.length; i++) {
    if ($scope.catCountainr.indexOf($scope.datas[i].category) == -1) {
      $scope.catCountainr.push($scope.datas[i].category);
    }
  }
  for (var i = 0; i < $scope.catCountainr.length; i++) {
    $scope.categorizedData.push({
      item: $scope.catCountainr[i],
      isDisabled: true
    });
    $scope.indexContainer.push($scope.categorizedData.indexOf($scope.datas[i].category));
    for (var j = 0; j < $scope.datas.length; j++) {
      if ($scope.datas[j].category == $scope.catCountainr[i]) {
        $scope.categorizedData.push({
          item: $scope.datas[j].item,
          isDisabled: false
        });
      }
    }
  }

});
＆＃13; 
.diffColor {
  background-color: wheat;
  pointer-events: none;
  user-select: none;
}
＆＃13;
＆＃13;
＆＃13;

第二次回答

与你的js略有不同，但对我来说似乎更好，所以我补充说。请查看更新的JS和HTML代码。

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
</head>

<body ng-controller="myCtrl">
  <div class="container">
    <form action="" class="">
      <div id="widgetContainer">
        <!--<input type="text" ng-click="openSelect()" class="input-control">
				<div id="selectContainer" ng-show="selectEnable">
					<div>{{selectedItems.toString()}}</div>
					<input type="text" id="searchField" ng-model="searchField" ng-change="filter()">
					<div id="listContainer">
						<ul id="innerContainer">
							<li ng-repeat="data in data2Show | orderBy: data.item" ng-model="data2show">
								<h4>{{data.category}}</h4>
								<input type="checkbox" ng-change="itemChecked(data)" name="select" ng-model="data.flag" ng-checked="isChecked(data)"> {{data.item}}
							</li>

							<div ng-show="dataLoading" ng-model="dataLoading">loading...</div>
							<li id="loadMore" ng-click="loadMore()">
								load more
							</li>

						</ul>
					</div>
				</div>-->

        <ul id="select">
          <li ng-repeat="data in categorizedData" ng-class="{'diffColor': data.isDisabled}">{{ data.item }}</li>
        </ul>


      </div>
    </form>

  </div>
</body>

</html>
＆＃13; 
"use strict";

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope, $http) {

  $scope.datas = [{
    "item": "South Korea",
    "category": "Asia",
    "flag": false
  }, {
    "item": "England",
    "category": "Europe",
    "flag": false
  }, {
    "item": "Japan",
    "category": "Asia",
    "flag": false
  }, {
    "item": "Denmark",
    "category": "Europe",
    "flag": false
  }, {
    "item": "North Korea",
    "category": "Asia",
    "flag": false
  }, {
    "item": "Geramany",
    "category": "Europe",
    "flag": false
  }, {
    "item": "China",
    "category": "Asia",
    "flag": false
  }, {
    "item": "Spain",
    "category": "Europe",
    "flag": false
  }, {
    "item": "India",
    "category": "Asia",
    "flag": false
  }, {
    "item": "Italy",
    "category": "Europe",
    "flag": false
  }, {
    "item": "Tailand",
    "category": "Asia",
    "flag": false
  }, {
    "item": "Portugal",
    "category": "Europe",
    "flag": false
  }];

  $scope.catCountainr = [];
  $scope.categorizedData = [];
  $scope.indexContainer = [];
  for (var i = 0; i < $scope.datas.length; i++) {
    if ($scope.catCountainr.indexOf($scope.datas[i].category) == -1) {
      $scope.catCountainr.push($scope.datas[i].category);
    }
  }
  for (var i = 0; i < $scope.catCountainr.length; i++) {
    $scope.categorizedData.push({
      item: $scope.catCountainr[i],
      isDisabled: true,
      items: []
    });
    for (var j = 0; j < $scope.datas.length; j++) {
      if ($scope.datas[j].category == $scope.catCountainr[i]) {
        $scope.categorizedData[i].items.push({
          item: $scope.datas[j].item
        });
      }
    }
  }

});
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题