Javascript 为选择元素angularJS设置选定值_Javascript_Angularjs

Javascript 为选择元素angularJS设置选定值

javascript angularjs

Javascript 为选择元素angularJS设置选定值,javascript,angularjs,Javascript,Angularjs,我的代码是这样的 <body ng-app="myApp" ng-controller="MainCtrl"> <select data-ng-model="myclass" data-ng-options="color.name for color in colors"> <option value="">-- Select Freight Class --</option> </select>

我的代码是这样的

    <body ng-app="myApp" ng-controller="MainCtrl">
    <select data-ng-model="myclass" data-ng-options="color.name for color in colors">
        <option value="">-- Select Freight Class --</option>
    </select>
</body>

    angular.module('myApp', []).controller('MainCtrl', [
    '$http', '$scope', '$filter', function ($http, $scope, $filter) {
    $scope.myclass = {
        "name": "65"
    };
    $scope.colors = [{
        name: '50'
    }, {
        name: '55'
    }, {
        name: '105'
    }, {
        name: '110'
    }, {
        name: '400'
    }, {
        name: '500'
    }];

}]);

正如您所见，我正在尝试将此select的默认选定值设置为65，但它不起作用。有人能告诉我如何做到这一点吗？

您可以通过以下方式实现：

$scope.myclass = $scope.colors[1];

请参见此处

您可以通过以下方式实现：

$scope.myclass = $scope.colors[1];

请看这里

首先，颜色数组中根本没有{name:65}对象。但是，即使您尝试选择选项{name:55}，它也不会起作用。原因是$scope.myclass不等于数组中的任何元素

Angular比较对象以将相应选项设置为选中，并且只有当一个对象是同一个对象时，一个对象才等于另一个对象。因此，要正确设置选定值，必须在颜色数组中提供对对象的引用：

首先，颜色数组中根本没有{name:65}对象。但是，即使您尝试选择选项{name:55}，它也不会起作用。原因是$scope.myclass不等于数组中的任何元素

看；可以通过选择所需值的索引来执行此操作：

angular
    .module('myApp', [])
    .controller('MainCtrl', ['$http', '$scope', '$filter',
        function ($http, $scope, $filter) {

            $scope.colors = [{
                name: '50'
            }, {
                name: '55'
            }, {
                name: '65'
            }, {
                name: '105'
            }, {
                name: '110'
            }, {
                name: '400'
            }, {
                name: '500'
            }];

            $scope.myclass = $scope.colors[2];

        }]);

因此，您想要的值也应该在$scope.colors列表中，就像我在上面添加的一样

您的小提琴已更正：

请参阅；可以通过选择所需值的索引来执行此操作：

angular
    .module('myApp', [])
    .controller('MainCtrl', ['$http', '$scope', '$filter',
        function ($http, $scope, $filter) {

            $scope.colors = [{
                name: '50'
            }, {
                name: '55'
            }, {
                name: '65'
            }, {
                name: '105'
            }, {
                name: '110'
            }, {
                name: '400'
            }, {
                name: '500'
            }];

            $scope.myclass = $scope.colors[2];

        }]);

因此，您想要的值也应该在$scope.colors列表中，就像我在上面添加的一样

您的小提琴已更正：

您正在将对象绑定到ng模型，而不是对象的字段。这并不坏，但在javascript中比较对象并不像在其他语言中那样简单

另外，65不在选项列表中，因此它默认为默认值

<select data-ng-model="myclass.name" data-ng-options="color.name as color.name for color in colors">
    <option value="">-- Select Freight Class --</option>
</select>

将对象绑定到ng模型，而不是对象的字段。这并不坏，但在javascript中比较对象并不像在其他语言中那样简单

另外，65不在选项列表中，因此它默认为默认值

<select data-ng-model="myclass.name" data-ng-options="color.name as color.name for color in colors">
    <option value="">-- Select Freight Class --</option>
</select>