2016-07-05 4 views
2

私はHTMLでJSONコレクションバインドJSONオブジェクト - ドロップダウン

$scope.person = [ 
    { 
     "Id": 1 
     "Name": "John" 
    }, 
    { 
     "Id": 2 
     "Name": "Jack" 
    }, 
    { 
     "Id": 3 
     "Name": "Watson" 
    }, 
]; 

を抱えているが、私はAngularJS HTMLの選択で上記のコレクションをバインドします。完全なHTMLソースコードが

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>HTML Select using AngularJS</title> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 

 
    <div class="md-block"> 
 
     <label>Person</label> 
 
     <select ng-model="selected.person"> 
 
      <option ng-repeat="key in person | orderBy:Id" value="{{key}}">({{key.Name}})</option> 
 
     </select> 
 
    </div> 
 

 
</div> 
 

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

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

 
     $scope.person = [ 
 
      { 
 
       "Id": 1, 
 
       "Name": "John" 
 
      }, 
 
      { 
 
       "Id": 2, 
 
       "Name": "Jack" 
 
      }, 
 
      { 
 
       "Id": 3, 
 
       "Name": "Watson" 
 
      } 
 
     ]; 
 

 
     $scope.selected = { 
 
      person: null 
 
     }; 
 

 
     $scope.$watchCollection('selected.person', function (newData, oldDaata) { 
 
      var obj = JSON.parse(newData); 
 
      if ((obj != undefined) && (obj != null) && (obj.Id != undefined) && (obj.Id != null) && (obj.Id != "0")) { 
 
       var name = obj.Name; 
 
       alert(name); 
 
      } 
 
     }); 
 

 
    }); 
 
</script> 
 
</body> 
 
</html>

である私は、ドロップダウンでジャックを選択した私の期待選択した値は

{ 
    "Id": 2 
    "Name": "Jack" 
} 

あるしかし、私は価値が形をしているそうです文字列の"{"Id":2,"Name":"Jack"}"

enter image description here

親切に私を支援し、JSONオブジェクトとして値を取得する方法を...あなただけのJSONオブジェクトを取得するには次の操作を行うことができ

+0

1)Jsonオブジェクトで、jsonドキュメントではありません。 2)1つの解決策は、JSON.parse(yourJsonString)を使用することです。 – juvian

答えて

1

JSON.parse(yourJsonString); 

だからあなたのコードがすべき次のようになります。

var newDataJSON = JSON.parse(newData) 
var name = newDataJSON.Name 
+0

ありがとうございます。 –

+0

@IRPunchこれが役に立った場合、回答を受け入れてください。 –

+0

@IRPunchありがとう –

関連する問題