2
私はangularjsを初めて使用しています。複数の選択肢からコンテンツを取得するためのコードを記述しようとしています。下のコードのとおり、Productドロップダウンから「HTML 5の機能」を選択すると、#htmlコンテンツを取得したいと思います。簡単な方法でどうやって取得できますか？私のコードは次のようになります：複数の条件でSelectでng-ifを使用する方法AngularJS
enter code here
<html>
<head>
<link rel="stylesheet"
href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/
css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/
angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<h1>Web Developer</h1>
<div class="row">
<div class="col col-lg-4">
<form class="form">
<div class="form-group">
<label> Categories :</label>
<select name="categoriesList" ng-model="selectedCategory"
class="form-control">
<option ng-repeat="item in CategoryList"
value='{{item}}'>{{item.value}}</option>
</select>
</div>
<div class="form-group">
<label> Products :</label>
<select ng-disabled="selectedCategory == null"
name="productList" ng-model="selectedProduct"
class="form- control">
<option ng-repeat="item in ProductList | myFilter :
selectedCategory" value='{{item}}'>{{item.value}}</option>
</select>
</div>
<div id="html" ng-if="selectedProduct.value === 'HTML 5 FEATURES'">
<div class="newFeatures">
<ul>
<li>New Doctype</li>
<li>The Figure Element</li>
<li>Email Inputs</li>
<li>Placeholders</li>
<li>Local Storage</li>
<li>Autofocus Attribute</li>
</ul>
</div>
</div>
</form>
</div>
</div>
<script>
var app = angular.module('myApp', []);
angular.module('myApp').filter('myFilter', function() {
return function(input, selectedCategory) {
input = input || '';
if(selectedCategory == null){
return input;
}else{
var out = new Array();
selectedCategory = JSON.parse(selectedCategory);
for (var i = 0; i < input.length; i++) {
var item = input[i];
if(item.categoryId == selectedCategory.id){
out.push(item);
}
}
return out;
}
};
});
app.controller('myCtrl', ['$scope', function($scope) {
$scope.selectedCategory = null;
$scope.selectedProduct = null;
$scope.CategoryList = [
{id:0, value:'HTML'},
{id:1, value:'CSS'},
{id:2, value:'JAVA SCRIPT'},
{id:3, value:'ANGULAR JS'}
];
$scope.ProductList = [
{categoryId:0, id:1, value:'HTML 5 FEATURES'},
{categoryId:0, id:2, value:'WEB WORKERS'},
{categoryId:0, id:3, value:'STORAGE'},
{categoryId:0, id:3, value:'CANVAS'},
{categoryId:0, id:3, value:'KEYFRAMES'},
{categoryId:1, id:4, value:'BOX MODEL'},
{categoryId:1, id:5, value:'NEW CSS3 FEATURES'},
{categoryId:1, id:6, value:'POSITIONS'},
{categoryId:2, id:7, value:"OOPs"},
{categoryId:2, id:8, value:'ARRAY MANIPULATIONS'},
{categoryId:2, id:9, value:'EMAIL'},
{categoryId:3, id:9, value:'DIRECTIVES'},
{categoryId:3, id:9, value:'FILTERS'},
{categoryId:3, id:9, value:'SCOPES & ROOT SCOPES'},
];
}]);
</script>
</body>
</html>