我刚接触angularjs。我试图编写代码从多个选择选项获取内容。根据我下面的代码，当我从产品下拉菜单中选择"html 5 FEATURES"时，我想获得#html内容。我怎么才能用更简单的方式。下面是我的代码:
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>
方法简单-例如放$http。获取请求到控制器并设置ProductList数据
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
$scope.ProductList = response.data;
}, function errorCallback(response) {
});