简体   繁体   English

无法将下拉选项设置为默认选中

[英]can not set drop-down option as a default selected

i'm trying to set drop-down value as default from javascript code but i cannot set it. 我正在尝试从JavaScript代码中将下拉值设置为默认值,但我无法设置它。

my code jsFiddle 我的代码jsFiddle

<div ng-controller="csrClrt">

    <div ng:repeat="(key, item) in items track by $index">

        <md-input-container>
            <label>Face Style:</label>
            <md-select ng-model="item.style" ng-change="f_style()" ng-model-options="{trackBy: '$value.id'}">
                <md-option ng-value="user" ng:repeat="user in styles">{{user.name}}</md-option>
            </md-select>
        </md-input-container>
        <div>
            Id:{{item.style.id}}
            <br/> Want to Display Name {{item.style.name}}
        </div>
    </div>


</div>

JavaScript Code JavaScript代码

angular.module('MyApp', ['ngMaterial'])
.controller('csrClrt', function ($scope) {
    stylesdata = [{
            name: "a",
            id: 0
        }, {
            name: "b",
            id: 1
        }, {
            name: "c",
            id: 3
        }
    ];
    $scope.items = ["0"];
    var style = [];
    for (var i = 0; i < stylesdata.length; i++) {
        style.push({
            name: stylesdata[i].name,
            id: stylesdata[i].id
        })
    }
    $scope.styles = style;
})

You have not create items object properly and no need of ng:repeat="(key, item) in items track by $index" 您尚未正确创建items对象,并且ng:repeat="(key, item) in items track by $index"不需要ng:repeat="(key, item) in items track by $index"

View 视图

<div ng-controller="csrClrt">
    <md-input-container>
        <label>Face Style:</label>
        <md-select ng-model="items.style" ng-change="f_style()" ng-model-options="{trackBy: '$value.id'}">
            <md-option ng-value="user" ng:repeat="user in styles">{{user.name}}</md-option>
        </md-select>
    </md-input-container>
    <div>
        {{items.style}}
    </div>
</div>

Controller 控制者

$scope.items = {
    style: {
        id: 1
    }
};

Updated Fiddle 更新小提琴

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在当前时间的下拉菜单中设置自动选择的选项? - How to set auto selected option in drop-down with current time? 如何使用 jQuery、JavaScript 和 HTML 动态设置下拉列表的选定选项? - How do I dynamically set the selected option of a drop-down list using jQuery, JavaScript and HTML? 如何使用D3.js从下拉列表中设置最后一个选项 - How to set the last option from a drop-down list as selected using D3.js 如何使用取决于另一个下拉列表中所选选项的下拉列表显示表格简码 - how to display table shortcode with a drop-down list that depends on the selected option in another drop-down list 根据另一个下拉列表中的所选选项更改下拉列表中的项目 - Change items in a drop-down list depending on the selected option in another drop-down list 下拉框取决于在另一个下拉框中选择的选项 - Drop-down box dependent on the option selected in another drop-down box 如何从下拉列表中隐藏选定的选项 - How can I Hide Selected option from Drop-down list 如何显示特定于所选下拉选项的大量文本? - How to display a chunk of text specific to the drop-down option selected? 使用JQuery更改下拉菜单的选定选项 - Using JQuery to change a drop-down menu's selected option 下拉选择的选项旧值编辑在Laravel中不起作用 - drop-down selected option old value editing is in not working in laravel
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM