Question

我在这里创建下拉列表并设置默认值。这是我的对象

$scope.currentprop={
            name : "graphFillDirection",
            members : [{
                name : "ttb",
                caption : "Top to Bottom",
            }, {
                name : "btt",
                caption : "Bottom to Top"
            }, {
                name : "ltr",
                caption : "Left to Right"
            },{
                name : "rtl",
                caption : "Right to Left"
            }
            ],
            value : "ttb",
            //suppose  it is : value:""
        }

在这个对象中，我有members数组和属性value。所以检查迭代members.name和value属性，这是我的HTML。

<select ng-model="currentprop.value" ng-options="value.name as value.name  for (key,value) in currentprop.members" ng-selected="{{currentprop.value == value.name}}"></select>

如果案例currentprop.value == value.name匹配，那么我将值设置为ng-model。我的问题是，如果currentprop.value与value:""类似，则迭代值永远不会与currentprop.value匹配。所以我需要的是value:""然后我将members[0].name设置为ng-model。一些请帮帮我。 plnkr这里

Answer 1

在ng-init：

中尝试select

<select ng-model="currentprop.value" 
   ng-init="currentprop.value = currentprop.value || currentprop.members[0].name"
   ng-options="value.name as value.name  for (key,value) in currentprop.members" 
   ng-selected="{{currentprop.value == value.name}}">
 </select>

Working plunker

Answer 2

您可以在Ctrl：

中将currentprop.value设置为members [0] .name

$scope.currentprop={
        name : "graphFillDirection",
        members : [{
            name : "ttb",
            caption : "Top to Bottom",
        }, {
            name : "btt",
            caption : "Bottom to Top"
        }, {
            name : "ltr",
            caption : "Left to Right"
        },{
            name : "rtl",
            caption : "Right to Left"
        }
        ],
        value : "",
    };
 $scope.currentprop.value = $scope.currentprop.value=="" ? $scope.currentprop.members[0].name : $scope.currentprop.value;

Answer 3

如果在加载后的应用生命周期内，currentprop.value无法更改为""，那么此解决方案将非常适合您：

$scope.currentprop={
        name : "graphFillDirection",
        members : [{
            name : "ttb",
            caption : "Top to Bottom",
        }, {
            name : "btt",
            caption : "Bottom to Top"
        }, {
            name : "ltr",
            caption : "Left to Right"
        },{
            name : "rtl",
            caption : "Right to Left"
        }
        ],
        value : "",
    };

 $scope.currentprop.value = $scope.currentprop.value || $scope.currentprop.members[0].name;

如果在控制器初始化后它可以改变，你需要做这样的事情：

$scope.$watch('currentprop.value', function(value) {
  if (value !== '') {
    $scope.currentprop.value = $scope.currentprop.members[0].name;
  }
});

注意：如果您添加了观察者，那么您不必在第一个示例中添加$scope.currentprop.value = $scope.currentprop.value || $scope.currentprop.members[0].name;，因为观察者会在初始化时自动触发。

<强>优化

同样ng-options可以简化为ng-options="value.name as value.name for value in currentprop.members"

在ng-selected ng-model <select>时，您不需要添加ng-model。 <select ng-model="currentprop.value" ng-options="value.name as value.name for value in currentprop.members"> <option value="">Select a member</option </select>会自动选择选项。

默认的地方信息

如果您需要一个默认选项作为占位符，例如＆＃34;选择成员＆＃34;，您可以这样做：

{{1}}

使用条件angularjs设置默认值

3 个答案: