2017-02-19 34 views
0

如果用户在输入字段中键入“Cha”,我想在下拉列表中隐藏“Chad”选项。 为此,我使用angular js和javascript编写了以下代码,并且应该在if子句中包含哪些内容? 有没有其他方法来执行此操作?根据角度js中的条件在下拉列表中隐藏元素

<!DOCTYPE html> 
<html lang="en"> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> 
</script>     

<body> 
<div ng-app="myApp" ng-controller="myCtrl"> 
<form> 
First Name: 
<input type="text" ng-model="firstname"> 
</form> 

<select ng-model="selectedName" ng-options="name for name in names"> 
</select> 

</div> 

<script> 

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
$scope.firstname = "Cha"; 

//assigning elements to the drop down list 
$scope.names = ["Chad", "Ab", "Za"]; 

if($scope.firstname=="Cha"{ 

//new code segment here 
} 

}); 



</script> 
</body> 
</html> 
+0

我认为这是可以用在JavaScript拼接()方法来实现 –

回答

0

试试这个

<!DOCTYPE html> 
 
<html lang="en"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> 
 
</script>     
 

 
<body> 
 
    <div ng-app="myApp" ng-controller="myCtrl"> 
 
     <form> 
 
      First Name: 
 
      <input type="text" ng-change="inputUpdate(firstname)" ng-model="firstname"> 
 
     </form> 
 

 
     <select ng-model="selectedName" ng-options="name for name in names"> 
 
     </select> 
 

 
    </div> 
 

 
    <script> 
 

 
     var app = angular.module('myApp', []); 
 
     app.controller('myCtrl', function($scope) { 
 
      // $scope.firstname = "Cha"; 
 

 
//assigning elements to the drop down list 
 
$scope.names1 = ["Chad", "Ab", "Za"]; 
 
$scope.names = ["Chad", "Ab", "Za"]; 
 

 
$scope.names2 = ["Ab", "Za"]; 
 

 
$scope.inputUpdate = function(name){ 
 
    if (name == 'Chad') { 
 
     $scope.names = $scope.names2; 
 
    } else{ 
 
     $scope.names = $scope.names1; 
 
    } 
 

 
} 
 

 
// if($scope.firstname=="Cha"{ 
 

 
// //new code segment here 
 
// } 
 

 
}); 
 

 

 

 
</script> 
 
</body> 
 
</html>

相关问题