javascript - 按 id 发送的 Angular 表达式

Question

在 Select/Option onchange() 事件中，它应该将 JSON 文件的值作为 Angular 表达式写入 test ID div。

但是它写起来就像只是一个字符串:{{names[1].thnev}}(如果我手动将其放入 ID div 中，它就可以工作。)

你能帮我看看我错过了什么吗？ (过去 4 小时内...)谢谢。

<div ng-app="myApp" ng-controller="customersCtrl">      
    <select id="thaz" name="thaz" class="selectbox" onchange="onChange(this.value)">
        <option ng-repeat="x in names" value="{{x.id}}">{{x.id}} - {{x.thnev}}</option>
    </select>

    <div id="list"></div>

</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
        $http.get("al_list_th.php")
        .then(function (response) {$scope.names = response.data.records;});
    });

    function onChange(value) {
        document.getElementById("list").innerHTML = "{{names[" + value + "].thnev}}";   
    }
</script>

Answer 1

我们可以使用 AngularJS 提供的内置函数来简化问题。

在这种情况下，我们可以使用 ngModel 将 select 的值绑定(bind)到我们可以在模板中使用的变量中。我们将此变量称为 selectVal。

然后，我们可以直接在我们希望此输出所在的 div 内部写入 {{names[selectVal].thnev}} 。

我整理了这个示例来显示更改:

var app = angular.module('myApp', []);

app.controller('customersCtrl', function($scope, $http) {

  $scope.selectVal = "default";
  $scope.names = [{id: 0, thnev: 5}, {id: 1, thnev: 6} ];

  //$http.get("al_list_th.php")
    //.then(function (response) {$scope.names = response.data.records;});
});

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>

<div ng-app="myApp" ng-controller="customersCtrl"> 
     
    <select id="thaz" name="thaz" class="selectbox" ng-model="selectVal">
        <option value="default">None</option>
        <option ng-repeat="x in names" value="{{x.id}}">{{x.id}} - {{x.thnev}}</option>
    </select>

    <div id="list">
    	{{names[selectVal].thnev}}
    </div>

</div>

注意:在我的代码中，我添加了一个额外的选项，以便有一个默认选项，而不是空白的初始下拉列表。您不必这样做——即使没有它，代码也能正常工作。