Question

我是一个古老的“后卫”，对Angular和现代前端编程很新，但我必须学习......

我有以下问题：有一个包含不同人物属性的列表，这些属性是通过控制器响应中的ng-repeat创建的。值是可编辑的，但显示控件取决于属性的类型。例如，性别需要通过选择框进行编辑。选择框的选项是从Rest-Server获得的。所以现在主要问题是：如何为每个属性构建不同的选择框？我尝试了下面的代码，它不起作用：

<section class="contactProperty" ng-repeat="property in contactDetail.properties">
        <table>
            <tr>
                <td>{{property.message}}</td>
                <td rowspan=2>{{property.value}}

                    <script>
                        var lst = ContactDetailController.getClassification(property.type);
                    </script>

                    <input ng-show="{{property.displaystyle_id}}==1" type="text" ng-model="property.value"/>
                    <select ng-show="{{property.displaystyle_id}}==3" ng-model="property.value">
                        <option ng-repeat="opt in lst" value="{{opt.id}}">{{opt.message}}</option>
                    </select>

                </td>
            </tr>
            <tr>
                <td>
                    <select type="text" ng-model="property.status_id">
                            <option ng-repeat = "status in contactDetail.propertyStatus" value="{{status.id}}">{{status.message}}</option>                                          
                    </select>
                </td>
            </tr>       
        </table>
    </section>

Controller在顶级元素上定义，具有以下代码

.controller('ContactDetailController',
    ['$scope', '$rootScope', 'ContactDetailService', 
    function ($scope, $rootScope, ContactDetailService) {
        $scope.getContactDetail = function () {
            ContactDetailService.getContactDetail(function(response) {
                if(response.success) {

                    $scope.contactDetail=response;
                } else {

                    $scope.error = response.message;
                }
            });
        };

        $scope.getClassifications= function(type) {
            ContactDetailService.getClassifications(type, function(response) {
                if (response.success) {
                    return response;
                }
            });
        };

        $scope.getContactDetail();
    }]);

以及相应的服务：

.factory('ContactDetailService',
    ['$http', '$rootScope', '$location', 
    function ($http, $rootScope, $location) {
         var service = {};

         service.getContactDetail = function(callbackFunc) {
             delete $http.defaults.headers.common['X-Requested-With']; 
            var apiRoot="";
            apiRoot = $rootScope.environments[window.location.host];
            $rootScope.apiRoot=apiRoot;
            var id=$location.search().id;
            $http.get(apiRoot+'/contactdetail?id='+id, {})
            .success(function(response){
                $rootScope.contactDetail=response;
                callbackFunc(response);
            }).error(function(response){
                alert("error"+response.message);
            });

         };

         service.getClassifications = function(type, callbackFunc) {
             var apiRoot="";
             apiRoot = $rootScope.environments[window.location.host];
             $http.get(apiRoot+'/classifications?type='+type, {})
             .success(function(response) {
                 callbackFunc(response);
             })
             .error(function(response) {
                 alert("error"+response.message);
             });
         };


         return service;
    }]);

任何人都可以帮助我吗？

Answer 1

您可以使用ng-show/ng-hide或ng-if或ng-switch来显示/隐藏字段，具体取决于您选择的变量类型。如果这是你想要的。

Answer 2

我会尝试解释更多的精确度：

这是我从后端接受Json的一部分：

"properties": [
        {
            "id": 8,
            "type_id": 25,
            "status_id": 13,
            "contact_id": 4,
            "value": "27",
            "create_date": null,
            "update_date": null,
            "guikey": "gui.gender",
            "message": "Geschlecht",
            "displaystyle_id": 3,
            "queryparam": "9",
            "options": [
                {
                    "id": 26,
                    "type": 9,
                    "guikey": "gui.male",
                    "language": "de",
                    "message": "Männlich",
                    "displaystyle_id": 0
                },
                {
                    "id": 27,
                    "type": 9,
                    "guikey": "gui.female",
                    "language": "de",
                    "message": "Weiblich",
                    "displaystyle_id": 0
                }
            ]
        }
    ],

通过以下代码呈现：

<section class="contactProperty" ng-repeat="property in contactDetail.properties">
            <table>
                <tr>
                    <td>{{property.message}}</td>
                    <td rowspan=2 ng-switch on="property.displaystyle_id">{{property.value}}
                        <input ng-switch-when="1" type="text" ng-model="property.value"/>
                        <input ng-switch-when="2" type="date" ng-model="property.value"/>
                        <select ng-switch-when="3" ng-model="property.value">
                            <option ng-repeat="opt in property.options" value="{{opt.id}}">{{opt.message}}</option>
                        </select>

                    </td>
                </tr>
                <tr>
                    <td>{{property.status_id}}
                        <select type="text" ng-model="property.status_id">
                                <option ng-repeat = "status in contactDetail.propertyStatus" value="{{status.id}}">{{status.message}}</option>                                          
                        </select>
                    </td>
                </tr>       
            </table>
        </section>

生成的HTML包含一个选择框作为已定位：

<section class="contactProperty ng-scope" ng-repeat="property in contactDetail.properties">
<table>
<tbody>
<tr>
<td class="ng-binding">Geschlecht</td>
<td class="ng-binding" on="property.displaystyle_id" ng-switch="" rowspan="2">
27
<select class="ng-scope ng-pristine ng-valid" ng-model="property.value" ng-switch-when="3">
<option class="ng-binding ng-scope" value="26" ng-repeat="opt in property.options">Männlich</option>
<option class="ng-binding ng-scope" value="27" ng-repeat="opt in property.options">Weiblich</option>
</select>
</td>
</tr>
<tr>
</tbody>
</table>
</section>

但浏览器在此示例中显示值“Männlich”，但我希望看到“Weiblich”，因为property.value 27是从json传递的。我只是将调试的值显示为{{property.value}}，它显示27，这是正确的。我不明白为什么下拉列表仍显示第一个条目（26 /Männlich）...

Angular ng-repeat中的动态选择框

2 个答案: