Angular.js：ng選項

Question

考慮這個例子。 我有一個畫廊列表，每個畫廊都選擇了一個唯一的客戶。 我還可以更改特定畫廊的客戶。 為此，我在選擇/選項列表中創建了一個客戶列表。

<select ng-model="clientList" ng-options="client.id as client.clientName for client in clients" >
     <option value="">Choose Client</option>
</select>

該列表是從數據庫填充的。 通常，我使用client.id來選擇項目。 作為Angularjs的新手，它似乎將自己的值分配給value =“”。 在我的示例中，圖庫表具有一個客戶端列，其中列出了與該客戶端表和client.id有關的唯一clientID。 如何選擇正確的客戶端？

調節器

function imageGalleryCtrl ($scope, images, clients, galleries)
{

    $scope.panes = [
        { title:"Home", content:"/beta/application/views/images/uploader/create.html", active: true },
        { title:"Upload", content:"/beta/application/views/images/uploader/upload.html"},
        { title:"Edit", content:"/beta/application/views/images/uploader/edit.html"}
    ];

    //close modal
    $scope.close = function () {
        $scope.imageUploader = false;
    };

    //get gallery info on click from table
    $scope.getGallery = function(id, gallery)
    {
        //set gallery ID to scope
        $scope.galleryID = id;

        //open the modal
        $scope.imageUploader = true;

        //get gallery information
        $scope.galleryCollection = galleries.getGallery(id);

        $scope.galleryCollection.then(function(galleries){
            $scope.gallery = galleries.thisGal;
        });

        //get clients
        $scope.clientCollection = clients.getClients();

        $scope.clientCollection.then(function(clients){
            $scope.clients = clients.clients;
            //Set client
        });

        //get all the images 
        $scope.imgCollection = images.getImages(id);

        $scope.imgCollection.then(function(images){
            $scope.images = images.thisGal_images;
        });
    };
}

服務

myApp.factory('galleries', function ($http, $q)
{
    return {
        getGallery: function (id)
        {
            var deferred = $q.defer(id);

            $http.post('/beta/images/get/', {id: id}).success(function(data)
            {
                deferred.resolve(data);
            });

            return deferred.promise;
        }
    };
});

客戶端服務幾乎相同，只是引用了正確的網址

謝謝您的幫助

Answer 1

它是模型驅動的，您需要將$ scope.clientList設置為客戶端ID。 在您的控制器中，您可以執行以下操作

function Ctrl($scope) {
    $scope.clients = [{
        id: 1,
        clientName: 'Joe'
    }, {
        id: 2,
        clientName: 'Tom'
    }, {
        id: 3,
        clientName: 'Bob'
    }];

    $scope.clientList = 2; //clientList is the model defined in the select directive
}

jsFiddle上的演示

如果id字段是一個字符串，則應將clientList設置為字符串，而不是整數：

$scope.clientList = "245";