根据角度js中的条件隐藏下拉列表中的元素

时间:2017-02-19 16:19:24

标签: javascript jquery html angularjs

我想隐藏选项" Chad"在下拉列表中,如果用户键入" Cha"在输入字段中。 为此,我使用角度js和javascript编写了以下代码,我应该在if子句中包含哪些内容? 还有其他方法可以执行此操作吗?

<!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>

1 个答案:

答案 0 :(得分: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>