Question

我是角度js的新手，我需要在用户从搜索框中选择任意选项时更新数据，然后根据同一页面上用户的选择更新数据，例如当用户选择java然后java相关数据时col-lg-8类也应该使用一个或两个json文件。我的代码是自动完成

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js">
</script>
<script>
 var app=angular.module('demo',['ui.bootstrap']);
 app.controller('autoCtrl', function($scope, $http) {
 $http.get('auto.json').success(function(data) {
 $scope.myCourse = data;
 $scope.detail=details;
 });
 });
</script>
<style>
.container{
    margin-top: 7%;
}
.gry{
background-color: rgb(220,220,220);

    }
</style>
</head>

<body>
<div class="container" ng-controller="autoCtrl">
<div class="col-lg-3 gry" >
<div class="row">
<div class="col-lg-12">
<h3>Search Courses..</h3>
<input type="text" class="form-control" placeholder="e.g:Java,Php" ng-model="selectedCourse" typeahead="name as     name.course for name in myCourse | filter:$viewValue | limitTo:4">
</div>
</div>
</div>
<div class="col-lg-8">
<h3>Search Result...</h3>
<div></div>
<div>{{ data should be refelected here...}}</div>
<div>{{ data should be refelected here...}}</div>
<div>{{ data should be refelected here...}}</div>
</div>
</div>        
</body>
</html>

当用户从搜索列表中选择项目时，更新同一页面上的数据

0 个答案: