アングルで送信するアングル式

Question

選択/オプションonchange()イベントでは、角度表現としてJSONファイルの値を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の値をテンプレートで使用できる変数にバインドすることができます。この変数を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"> 
 
    \t {{names[selectVal].thnev}} 
 
    </div> 
 

 
</div>

注：私のコードでは、optionを追加したので、デフォルトとして反対になるでしょうdを空の初期ドロップダウンにします。あなたはこれを行う必要はありません - コードはそれなしで同じ動作します。