如何使用角度將對象傳遞給option標籤中的value屬性？

Question

我有一個選擇標記，我已經通過角度ng-repeat加載了數據。

<select ng-model="user.accessRole"> 
    <option ng-selected="{{item.name == user.accessRole.name}}" 
     ng-repeat="item in accessRoles" value="{{item}}"> 
     {{item.name}} 
    </option> 
    </select> 

一旦我提交了這個我得到的accessRole模型的值如下。

accessRole:"{"id":1,"name":"admin","accessRights":"administrative access"}" 

我希望這個值不用雙引號。這意味着， accessRole：{「id」：1，「name」：「admin」，「accessRights」：「administrative access」} 我試着通過刪除value屬性中的雙引號（value = {{item} }） 但它沒有給我解決方案。 我該怎麼做？

Answer 1

使用JSON.parse()字符串轉換成JSON對象

angular.module("app",[]) 
 
.controller("ctrl",function($scope){ 
 

 
$scope.user = {}; 
 
$scope.accessRoles= [{"id":1,"name":"admin","accessRights":"administrative access"}] 
 

 

 
$scope.submit = function(){ 
 
console.log($scope.user) 
 
    $scope.user.accessRole = JSON.parse($scope.user.accessRole) 
 
console.log($scope.user) 
 
} 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
<select ng-model="user.accessRole"> 
 
    <option ng-repeat="item in accessRoles" value="{{item}}"> 
 
     {{item.name}} 
 
    </option> 
 
    </select> 
 
    <button ng-click="submit()">click</button> 
 
</div>

Answer 2

應該是這樣了這一點。

var app = angular.module('anApp', []); 
 
app.controller('ctrl', function($scope) { 
 

 
    $scope.user = {}; 
 
    $scope.accessRoles= [{"id":1,"name":"admin","accessRights":"administrative access"}]; 
 
    
 
    $scope.display = function(){ 
 
    console.log($scope.user); 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> 
 

 
<div ng-app="anApp" ng-controller="ctrl"> 
 
    <div class="form-group"> 
 
    <select ng-options="role as role.name for role in accessRoles" ng-model="user.accessRole" ng-change="display()"> 
 
    </select> 
 
    </div> 
 
</div>