javascript - 如何在 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()
它不工作
有没有其他方法可以得到这些孩子?先感谢您
解决方案
像这样做
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;
}
"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
});
}
}
}
});
.diffColor {
background-color: wheat;
pointer-events: none;
user-select: none;
}
<!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>
第二个答案
与您的 js 略有不同的方法,但对我来说似乎更好,所以我添加了。请同时查看更新的 JS 和 HTML 代码。
"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
});
}
}
}
});
<!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" class="isDisabled">{{data.item }}
<ul ng-if="data.items && data.items.length > 0">
<li ng-repeat="itemVar in data.items" class="isDisabled">{{itemVar.item }}</li>
</ul>
</li>
</ul>
</div>
</form>
</div>
</body>
</html>
推荐阅读
- swift - 快速字符串分离,但包括
- c - 识别它是行主矩阵还是列主矩阵
- vb.net - 如何导入另一个表格?不使用视觉工作室
- php - Laravel 不断给我:“未定义的偏移量 2”
- flutter - Flutter 中的异步加载图像
- javascript - 带有变量的按钮多行引导程序
- android - 如何防止 ConcurrentModificationException
- macos - Delphi 10.3.3 macOS Notarization,错误客户端退出代码1
- python - Python 字典理解
- vb.net - 从 Form2 获取 Form1 复选框的值以构建 Exe