个人中心
gpt4 book ai didi

javascript - 使用填充数组动态创建的下拉列表不会使用 Angular 更新

转载 作者：行者123 更新时间：2023-12-03 12:13:31 25 4
gpt4 key购买 nike

我的第一个下拉列表在页面加载时正确加载，但子下拉列表在本地存储的第一个下拉列表之后加载。问题是当我加载第二个下拉列表并为其分配默认值时，我无法再更改其值。 http://jsfiddle.net/silvajeff/x2nrX/3/ 

angular.module('demoApp', []).controller('DemoController', function($scope) {
  //my first drop down loads with the page
  $scope.options = [
     { label: 'one', value: 1 },
     { label: 'two', value: 2 },
     { label: 'three', value: 3 },
     { label: 'four', value: 4 },
     { label: 'five', value: 5 }
  ];  

  $scope.firstSelect = $scope.options[3];  

//the second drop down loads after the first makes a selection. In the real code I am     populating the second from localstorage, but once it's assigned its default value I cannot change it.    
var init = function(){
   //depends on what was selected in first select
    $scope.captions = [
       { name: 'A', value: 'a' },
       { name: 'B', value: 'b' },
       { name: 'C', value: 'c' },
       { name: 'D', value: 'd' },
       { name: 'E', value: 'e' }
   ]; 
    $scope.secondSelect = $scope.captions[1];
}   
init();

});

最佳答案

请将 ng-if 更改为 ng-show，第二个下拉菜单将起作用 http://jsfiddle.net/Wc4CQ/ 

<body ng-app="demoApp">
    <div ng-controller="DemoController">

        <div>

            <select ng-model="firstSelect"
                ng-options="opt as opt.label for opt in options">
            </select>
<br><br>
            <select  ng-show="firstSelect.value == '4'" ng-model="secondSelect"
                ng-options="opt as opt.name for opt in captions">
            </select><br>
            The first select value is {{ firstSelect.value }}<br>
            Why can't I get the second select value to update: {{ secondSelect.value }}
        </div>

    </div>
</body>

或者如果您需要我们 ng-if 请参阅此处:http://jsfiddle.net/y5Bvv/ 

<body ng-app="demoApp">
    <div ng-controller="DemoController">
        <div>
            <select ng-model="firstSelect" ng-options="opt as opt.label for opt in options"></select>
            <br>
            <br>
            <select ng-if="firstSelect.value == '4'" ng-model="secondSelect.select" ng-options="opt as opt.name for opt in captions"></select>
            <br>The first select value is {{ firstSelect.value }}
            <br>Why can't I get the second select value to update: {{ secondSelect.select.value }}</div>
    </div>
</body>

JS:

angular.module('demoApp', []).controller('DemoController', function ($scope) {
    //my first drop down loads with the page
    $scope.options = [{
        label: 'one',
        value: 1
    }, {
        label: 'two',
        value: 2
    }, {
        label: 'three',
        value: 3
    }, {
        label: 'four',
        value: 4
    }, {
        label: 'five',
        value: 5
    }];
    $scope.firstSelect = $scope.options[3];

    //the second drop down loads after the first makes a selection. In the real code I am populating the second from localstorage, but once it's assigned its default value I cannot change it.    
    var init = function () {
        //depends on what was selected in first select
        $scope.captions = [{
            name: 'A',
            value: 'a'
        }, {
            name: 'B',
            value: 'b'
        }, {
            name: 'C',
            value: 'c'
        }, {
            name: 'D',
            value: 'd'
        }, {
            name: 'E',
            value: 'e'
        }];
        $scope.secondSelect = {};
        $scope.secondSelect.select = $scope.captions[1];
    }
    init();

});

关于javascript - 使用填充数组动态创建的下拉列表不会使用 Angular 更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24840740/

25 4 0
文章推荐： c# - 带有是或否按钮的 JavaScript 警报
文章推荐： node.js - Nodejs、TypeScript、ts-node-dev 和顶级等待
文章推荐： node.js - Nools 和流口水
文章推荐： javascript - 我的替换在我的功能中不起作用？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com