ng-options 在加载时的选择框中不显示 ng-model 对象（AngularJS）答案

【问题标题】：ng-options doesn't show the ng-model object in the select box on load (AngularJS)ng-options 在加载时的选择框中不显示 ng-model 对象（AngularJS）
【发布时间】：2016-05-22 01:17:44
【问题描述】：

我有一个 html 选择输入。这里我使用 AngularJS：

<select class="form-control" 
    ng-model="t.selected" 
    ng-options="option | matriseValgFilter for option in t.Valgalternativer" 
    ng-change="change(t.selected)">
</select>

问题是 t.select 已定义，但它没有显示在 html 选择列表框中。如果我选择了某些东西，那么 t.select 会发生变化并且显示的值会正确更改，我希望它在加载时显示 t.select。

这是角度代码，为了更好地说明而做了一个小提琴： https://jsfiddle.net/fiddlejan/Lt0cuwLd/

angular.module('app', ['ngAnimate'])

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

  $scope.t = {
    "Tabellnavn": "BE3.2:1",
    "Siffer": "x",
    "Stikkord": "Utvendig kledning:",
    "Tekst": {
      "Format": 0,
      "Content": "{Matrise BE3.2:1}"
    },
    "Merknader": null,
    "Delprodukter": null,
    "Valgalternativer": [{
      "Siffer": "-",
      "Tekst": "{Matrise BE3.2:1}",
      "Tekst2": null,
      "Kode": null,
      "Delalternativer": null
    }, {
      "Siffer": "00",
      "Tekst": "Valgfri",
      "Tekst2": null,
      "Kode": null,
      "Delalternativer": null
    }, {
      "Siffer": "11",
      "Tekst": "Murt forblending",
      "Tekst2": null,
      "Kode": "NB2.7---x-",
      "Delalternativer": null
    }, {
      "Siffer": "21",
      "Tekst": "Bordkledning på vegg utvendig – stående bord",
      "Tekst2": null,
      "Kode": "QK2.11xx---",
      "Delalternativer": null
    }, {
      "Siffer": "22",
      "Tekst": "Bordkledning på vegg utvendig – stående ukantede bord",
      "Tekst2": null,
      "Kode": "QK2.12x---",
      "Delalternativer": null
    }, {
      "Siffer": "23",
      "Tekst": "Bordkledning på vegg utvendig – stående spaltekledning",
      "Tekst2": null,
      "Kode": "QK2.15xx---",
      "Delalternativer": null
    }, {
      "Siffer": "24",
      "Tekst": "Bordkledning på vegg utvendig - liggende bord",
      "Tekst2": null,
      "Kode": "QK2.21xx---",
      "Delalternativer": null
    }, {
      "Siffer": "26",
      "Tekst": "Platekledning på vertikal flate utvendig utvendig",
      "Tekst2": null,
      "Kode": "QK5.226--",
      "Delalternativer": null
    }, {
      "Siffer": "31",
      "Tekst": "Kledning med tynnplatekassetter av kopper",
      "Tekst2": null,
      "Kode": "SM4.2--",
      "Delalternativer": null
    }, {
      "Siffer": "32",
      "Tekst": "Kledning med tynnplatekassetter av titansink",
      "Tekst2": null,
      "Kode": "SM4.3--",
      "Delalternativer": null
    }, {
      "Siffer": "33",
      "Tekst": "Kledning med tynnplatekassetter av aluminium",
      "Tekst2": null,
      "Kode": "SM4.4--",
      "Delalternativer": null
    }, {
      "Siffer": "34",
      "Tekst": "Kledning med tynnplatekassetter av varmforsinket stål",
      "Tekst2": null,
      "Kode": "SM4.5--",
      "Delalternativer": null
    }, {
      "Siffer": "35",
      "Tekst": "Kledning med plane metallplater",
      "Tekst2": null,
      "Kode": "SM5.1",
      "Delalternativer": null
    }, {
      "Siffer": "88",
      "Tekst": "Uten utvendig kledning",
      "Tekst2": null,
      "Kode": null,
      "Delalternativer": null
    }, {
      "Siffer": "99",
      "Tekst": "Annen utvendig kledning – må spesifiseres",
      "Tekst2": null,
      "Kode": null,
      "Delalternativer": null
    }],
    "selected": {
      "Siffer": "99",
      "Tekst": "Annen utvendig kledning – må spesifiseres",
      "Tekst2": null,
      "Kode": null,
      "Delalternativer": null
    }
  };

  $scope.change = function(selected) {
    console.log(selected);
  }
})
.filter('matriseValgFilter', function() {

    return function (option) {

        if (!isNaN(option.Siffer) && option.Kode != null){
            return option.Siffer + ' - ' + option.Tekst + ' (' + option.Kode + ')';
        }

        if (!isNaN(option.Siffer)){
            return option.Siffer + ' - ' + option.Tekst;
        }

        return option.Tekst;


    }
});

编辑：澄清一下，t.select 设置为“99 - Annen utvendig kledning - må spesifiseres”，这是在选择框中加载时应显示的内容。

【问题讨论】：

标签： javascript html angularjs json angularjs-select

【解决方案1】：

t.selected 和 t.Valgalternativer 中的对象因 javascript 而异。因为它们的哈希值不同。 Javascript 仅比较哈希值是否相等。只有我们程序员必须教 Javascript，才能将其与 'Tekst' 字段而不是 '$hash' 进行比较。
工作 JSFiddle - https://jsfiddle.net/Lt0cuwLd/6/

以下是我添加的唯一代码。它只是遍历列表中的每个项目，并将其“Tekst”值与 t.selected 的“Tekst”值进行比较。如果它们都相等，它将返回该对象，我们将其分配给 t.selected。现在 t.selected 的 '$hash' 值也匹配，而不仅仅是 'Tekst' 毕竟计算机不像人类那么聪明:)

$scope.t.selected = $scope.t.Valgalternativer.reduce(function(curr, next){
    if(next.Tekst === $scope.t.selected.Tekst) return next;
    else return curr;
}, {})

【讨论】：

【解决方案2】：

你需要像 $scope.t.selected = $scope.t.Valgalternativer[0]; 这样初始化你的变量 t.selected。

jsfiddle 上的实时示例。

angular.module('app', ['ngAnimate'])

.controller('controller', function($scope) {
 
  $scope.t = {
    "Tabellnavn": "BE3.2:1",
    "Siffer": "x",
    "Stikkord": "Utvendig kledning:",
    "Tekst": {
      "Format": 0,
      "Content": "{Matrise BE3.2:1}"
    },
    "Merknader": null,
    "Delprodukter": null,
    "Valgalternativer": [{
      "Siffer": "-",
      "Tekst": "{Matrise BE3.2:1}",
      "Tekst2": null,
      "Kode": null,
      "Delalternativer": null
    }, {
      "Siffer": "00",
      "Tekst": "Valgfri",
      "Tekst2": null,
      "Kode": null,
      "Delalternativer": null
    }, {
      "Siffer": "11",
      "Tekst": "Murt forblending",
      "Tekst2": null,
      "Kode": "NB2.7---x-",
      "Delalternativer": null
    }, {
      "Siffer": "21",
      "Tekst": "Bordkledning på vegg utvendig – stående bord",
      "Tekst2": null,
      "Kode": "QK2.11xx---",
      "Delalternativer": null
    }, {
      "Siffer": "22",
      "Tekst": "Bordkledning på vegg utvendig – stående ukantede bord",
      "Tekst2": null,
      "Kode": "QK2.12x---",
      "Delalternativer": null
    }, {
      "Siffer": "23",
      "Tekst": "Bordkledning på vegg utvendig – stående spaltekledning",
      "Tekst2": null,
      "Kode": "QK2.15xx---",
      "Delalternativer": null
    }, {
      "Siffer": "24",
      "Tekst": "Bordkledning på vegg utvendig - liggende bord",
      "Tekst2": null,
      "Kode": "QK2.21xx---",
      "Delalternativer": null
    }, {
      "Siffer": "26",
      "Tekst": "Platekledning på vertikal flate utvendig utvendig",
      "Tekst2": null,
      "Kode": "QK5.226--",
      "Delalternativer": null
    }, {
      "Siffer": "31",
      "Tekst": "Kledning med tynnplatekassetter av kopper",
      "Tekst2": null,
      "Kode": "SM4.2--",
      "Delalternativer": null
    }, {
      "Siffer": "32",
      "Tekst": "Kledning med tynnplatekassetter av titansink",
      "Tekst2": null,
      "Kode": "SM4.3--",
      "Delalternativer": null
    }, {
      "Siffer": "33",
      "Tekst": "Kledning med tynnplatekassetter av aluminium",
      "Tekst2": null,
      "Kode": "SM4.4--",
      "Delalternativer": null
    }, {
      "Siffer": "34",
      "Tekst": "Kledning med tynnplatekassetter av varmforsinket stål",
      "Tekst2": null,
      "Kode": "SM4.5--",
      "Delalternativer": null
    }, {
      "Siffer": "35",
      "Tekst": "Kledning med plane metallplater",
      "Tekst2": null,
      "Kode": "SM5.1",
      "Delalternativer": null
    }, {
      "Siffer": "88",
      "Tekst": "Uten utvendig kledning",
      "Tekst2": null,
      "Kode": null,
      "Delalternativer": null
    }, {
      "Siffer": "99",
      "Tekst": "Annen utvendig kledning – må spesifiseres",
      "Tekst2": null,
      "Kode": null,
      "Delalternativer": null
    }],
    "selected": {
      "Siffer": "99",
      "Tekst": "Annen utvendig kledning – må spesifiseres",
      "Tekst2": null,
      "Kode": null,
      "Delalternativer": null
    }
  };
$scope.t.selected = $scope.t.Valgalternativer[0];
})
.filter('matriseValgFilter', function() {
	
    return function (option) {

        if (!isNaN(option.Siffer) && option.Kode != null){
        	return option.Siffer + ' - ' + option.Tekst + ' (' + option.Kode + ')';
        }
        
        if (!isNaN(option.Siffer)){
        	return option.Siffer + ' - ' + option.Tekst;
        }
        
        return option.Tekst;
    
    
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.min.js"></script>

<body ng-app="app">
  <div ng-controller="controller as c" style="padding:10px;">

    <select class="form-control" 
        ng-model="t.selected" 
        ng-options="option | matriseValgFilter for option in t.Valgalternativer" >
    </select>

<pre style="margin-top: 10px;">
{{t.selected | json}}
</pre>

  </div>

</body>

更新

哦……我明白了。您在变量t 中定义t.selected。但它不起作用，因为

{
  "Siffer": "99",
  "Tekst": "Annen utvendig kledning – må spesifiseres",
  "Tekst2": null,
  "Kode": null,
  "Delalternativer": null
}!= {
  "Siffer": "99",
  "Tekst": "Annen utvendig kledning – må spesifiseres",
  "Tekst2": null,
  "Kode": null,
  "Delalternativer": null
}

另一个词不相等。

$scope.t.Valgalternativer[$scope.t.Valgalternativer.length-1]!=$scope.t.selected

试试这个

$scope.t.selected = .Valgalternativer[$scope.t.Valgalternativer.length-1];

【讨论】：

嗯，这会将 t.select 更改为错误的值。现在您将其重置为第一个元素 Valgalternativer[0] ({Matrise BE3.2:1})，但已选择的值为“99 - Annen utvendig kledning – må spesifiseres”
您为什么认为，选择的值是“99 - Annen utvendig kledning – må spesifiseres”？在 {{t.selected | json}} 的 jsfiddle 中也显示了第一个元素 {Matrise BE3.2:1})。

不，它没有，

 显示“99 - Annen utvendig kledning – må spesifiseres”。除非您像以前那样使用 ng-init 将其更改为第一个元素。如果您查看 $scope.t.selected，则值为“99 - Annen utvendig kledning – må spesifiseres”。我不希望它在加载时改变。

【解决方案3】：

编辑

根据您的评论，要使其正常工作，一种方法是像这样设置选定的属性。

$scope.t.selected =$scope.t.Valgalternativer[2];

如果对象来自其他服务或 json，您可能必须从 t.Valgalternativer 中查找/过滤，然后分配适当的索引。

之所以如此，是因为正如在其他答案中指出的那样，如果您以您正在做的方式初始化 selected ，它将是一个哈希值不同的新对象。

如果您喜欢这种方法，请从 t 中删除“selected”属性，并按上述方法单独添加。无需更改任何标记。

初始

试试这个

<select class="form-control" 
    ng-model="t.selected" 
    ng-options="option | matriseValgFilter as option | matriseValgFilter for option in t.Valgalternativer" 
    ng-change="change(t.selected)"
    ng-init='t.selected = "99 - Annen utvendig kledning – må spesifiseres"'>
</select>

您选择的选项的 viewValue 应该与 select 的选项之一的值匹配。

as 语法用于为选择中的选项设置值。文档here。

【讨论】：

嗯，加载的值并不总是“99 - Annen utvendig kledning - må spesifiseres”或数组中的第一个值 $scope.t.Valgalternativer[0]。它应该是范围内已经定义的当前 t.selected 值。
@ganjan 根据您的评论修改了答案。

【解决方案4】：

没有一个答案在我的实际应用程序中正常工作，但使用我用 ng-init 调用的控制器中的方法解决了它。

结束了：

    <select class="form-control"  
            ng-init="loadMatriseValg(node, t)"
            ng-model="t.selected"
            ng-options="option | matriseValgFilter for option in t.Valgalternativer"
            ng-change="changeMatrise(node, t.selected, '{{t.selected.Kode}}')"></select>

然后在控制器中我有这个：

            $scope.loadMatriseValg = function (node, t) {

                // user has not selected anything, set default value
                if (!t.selected) {
                    t.selected = t.Valgalternativer[0];
                }

                // loop through all valg alternativer
                for (var v = 0; v < t.Valgalternativer.length; v++) {

                    if (t.Valgalternativer[v].Siffer == t.selected.Siffer) {

                        t.selected = t.Valgalternativer[v];
                        return;
                    }
                }

            }

这里有新的小提琴：

https://jsfiddle.net/fiddlejan/wng2genw/

【讨论】：