使用Angular Material更新md-select中布尔值的问题求助

我看了你的代码，能发现几个导致需求无法实现的逻辑问题，下面帮你逐一修正：

原代码的核心问题 #

• 点击提交时，仅将选中项的isEnabled设为true，但没有把其余所有项的isEnabled重置为false，不符合你“其余项设为false”的要求
• 选项显示的是数组索引（0、1、2），如果你的需求是展示1、2、3这类从1开始的数字，显示逻辑需要调整
• 代码里存在未定义的finalvalue打印，属于无效代码

修正后的完整代码 #

<html lang = "en">
<head>
    <link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
    <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
    <style> </style>
    <script language = "javascript">
        angular
            .module('testApp', ['ngMaterial'])
            .controller('myCTRL', myCTRL);

        function myCTRL ($scope) {
            $scope.chooseValue = false;
            // 初始选中第一个选项（对应显示的1）
            $scope.selectedValue = 0;
            $scope.testValue = [
                { isEnabled: false},
                { isEnabled: false },
                { isEnabled: false }
            ];

            $scope.submitvalue = function(){
                // 第一步：先把所有项的isEnabled重置为false
                angular.forEach($scope.testValue, function(item) {
                    item.isEnabled = false;
                });
                // 第二步：把选中的项设为true
                $scope.testValue[$scope.selectedValue].isEnabled = true;
                // 打印验证结果
                console.info($scope.testValue);
            }
        }
    </script>
</head>
<body ng-app = "testApp">
    <div id = "inputContainer" class = "inputDemo" ng-controller = "myCTRL as ctrl" ng-cloak>
        <form role="form" name="deviceForm">
            <div>
                <md-input-container >
                    <label>select flags want to enable</label>
                    <md-select ng-model="selectedValue" >
                        <!-- 显示从1开始的数字，而不是原始索引 -->
                        <md-option ng-repeat="(key,value) in testValue">{{key + 1}}</md-option>
                    </md-select>
                </md-input-container>
            </div>
        </form>
        <input type="submit" ng-click="submitvalue()">
    </div>
</body>
</html>

关键修改说明 #

• 重置所有项的状态：在submitvalue函数里，先用angular.forEach遍历testValue，把每一项的isEnabled都设为false，确保只有选中项会被设为true
• 调整选项显示逻辑：把md-option里的{{key}}改成{{key + 1}}，这样下拉框会显示1、2、3，而不是0、1、2，更符合你的需求描述
• 修正初始值对应关系：因为现在选项显示的是key+1，所以初始选中显示1的话，selectedValue要设为0（对应数组的第一个元素索引）
• 移除无效代码：删掉了未定义的finalvalue打印语句，避免控制台报错

现在你点击提交后，选中的项会被设为true，其他所有项都会被设为false，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Sathish