Question

我想在3秒后更新选项。

在我的HTML中，我有生成选项的代码。

<select
  ng-model="selectedOperator"
  ng-options="operator as operator.name for operator in operators">
</select>

在同一个HTML中，我有

$(function() { 
  $('select').material_select(); 
});

初始化Materialise下拉列表。

在我的Javascript中：

.controller('MainCtrl', function ($scope, $timeout) {

  // initialize old(first) values
  $scope.operators = [
    { value: 1, name: 'Old-One' }, 
    { value: 2, name: 'Old-Two' }
  ];

  $scope.selectedOperator = null; // no default selected value

  // after three seconds, replace the old value with new one.
  $timeout(function() {
    $scope.operators = [{ value: 10, name: 'New Awesome' }];
    // reinitialize the materialize select.
    $('select').material_select();
  }, 3000);
});

然而，它没有更新，它仍然产生旧值。在HTML中，{{ operators }}的值是新值。

我是Angular的新手，非常感谢任何帮助。

干杯

更新：我有70％确定他们彼此不能很好地相处，通过用单选按钮替换选择来进行临时修复。

Answer 1

<select name="repeatSelect" id="repeatSelect" ng-model="selectedOperator">
      <option ng-repeat="operator in operators" value="{{operator.value}}">{{operator.name}}</option>
</select>

DOC

Answer 2

这是一个示例，您可以稍后更改此值，其工作正常。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
            $(function() { 
                $('select').material_select(); 
            });

            angular.module('myApp', []).controller('namesCtrl', function($scope, $timeout) {
                $scope.operators = [
                       { value: 1, name: 'Old-One' }, 
                       { value: 2, name: 'Old-Two' }
                     ];
                $scope.selectedOperator = null; // no default selected value

                   // after three seconds, replace the old value with new one.
                   $timeout(function() {
                     $scope.operators = [{ value: 10, name: 'New Awesome' }];
                     // reinitialize the materialize select.
                     $('select').material_select();
                   }, 3000);

           });
    </script>
</head>
<body>
    <div ng-app="myApp" ng-controller="namesCtrl">
        <h1>Angular JS Application</h1>
        <select ng-model="selectedOperator" ng-options="operator as operator.name for operator in operators">
        </select>
    </div>
</body>

替换选项值

2 个答案: