替换选项值答案

【问题标题】：Replace option values替换选项值
【发布时间】：2016-12-07 12:12:59
【问题描述】：

我正在尝试在 3 秒后更新选项。

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

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

在同一个 HTML 中，我有

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

初始化 Materialize 下拉菜单。

在我的 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% 的人确定他们不能很好地相互配合，通过将 select 替换为单选按钮进行了临时修复。

【问题讨论】：

我试过了，你有日志吗？
不要将 jQuery 与 Angular 一起使用。看看这个指令：github.com/krescruz/angular-materialize
@AppuAmruth 我没有收到任何日志

标签： angularjs materialize

【解决方案1】：

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

DOC

【讨论】：

好吧，我偶然发现了 stackoverflow 中的一篇文章，强烈建议不要在选项中使用 ng-repeat。 ng-options 旨在完成这项工作。

【解决方案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>

【讨论】：