javascript - 基于先前选择选项的内容选择选项angularjs

标签 javascript angularjs angular-ui-bootstrap

我想创建 2 个选择选项,其中另一个选择的选项的内容基于前一个选项。这是我的 html

<div class="col-sm-2">
            <select class="form-control" ng-model="y">
                <option value="1">a</option>
                <option value="2">b</option>
            </select>
        </div>
        <div class="col-sm-2">
            <select class="form-control" ng-model="z">
                <option ng-repeat = "x in list" value="{{x.idproduct}}">{{x.descproduct}}</option>
            </select>
        </div>

但有错误,其他选择选项不会显示此图片中的选项enter image description here

这是我的js文件

if ($scope.y === 1) {
         $scope.list = [
          {idproduct:"13", descproduct:"cc"},
          {idproduct:"14", descproduct:"dd"}
         ]; 
       }
       if ($scope.y === 2) {
         $scope.list = [
          {idproduct:"15", descproduct:"ee"}
         ]; 
       }

最佳答案

您需要绑定(bind) change 事件,以便您的列表在您的值更新时得到更新。另外,您的 === 可能会导致问题。使用 ===,您的字符串值将与整数 1 和 2 进行比较。
这是一个笨蛋:ng-change for change in dropdown

<select class="form-control" ng-model="y" ng-change="updateList()">
     <option value="1">a</option>
     <option value="2">b</option>
</select>
$scope.updateList()={
if ($scope.y == 1) {
         $scope.list = [
          {idproduct:"13", descproduct:"cc"},
          {idproduct:"14", descproduct:"dd"}
         ]; 
       }
       if ($scope.y == 2) {
         $scope.list = [
          {idproduct:"15", descproduct:"ee"}
         ]; 
       }
}

关于javascript - 基于先前选择选项的内容选择选项angularjs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47324328/

相关文章:

javascript - 获取元素之间的距离

javascript - 如何使用 Select2 4.0 使下拉菜单向左打开

javascript - 选项 beginAtZero 在 angular-chart.js 中不起作用

css - Bootstrap 验证消息正在下推我的表单的其余部分

JavaScript:在模糊时清除 setInterval,并在焦点上恢复

javascript - 如何在javascript中单击超链接时更改图像?

javascript - Angular Js 未捕获错误 : [$injector:modulerr] anonymous function

AngularJS UI 路由器 $onLocationChangeStart 事件。PreventDefault 不起作用

javascript - Angular Bootstrap 模式导致 strict-di 错误,不知道为什么

html - 如何创建外观独特的 Angular ui Bootstrap 对话框