Angularjs 角度重复中的动态选择框

我是一个老的背靠背和相当新的角度和现代前端编程，但我必须学习

我有以下问题：有一个包含多个不同person属性的列表，这些属性是通过ng repeat from Controller response创建的。这些值是可编辑的，但显示控件取决于属性的类型。例如，性别需要通过选择框进行编辑。选择框的选项从Rest服务器获得。 现在的主要问题是：如何为每个属性构建不同的选择框？ 我尝试了以下代码，但该代码不起作用：

<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>

以及相应的服务：

.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;
    }]);

---

有人能帮我吗？

根据所选变量的类型，您可以使用ng show/ng hide或ng if或ng开关显示/隐藏字段。如果这是您想要的。

我将尝试更准确地解释：

这是我从后端输入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包含一个选择框，如expact:

<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是从json传递的。我只是将debug的值显示为{{property.value}}，它显示为27，这是正确的。我不明白为什么下拉列表仍然显示第一个条目26/Männlich在这种情况下…

您想要复选框还是下拉列表？我需要下拉列表。性别只是一个例子。还有其他属性，比如位置或语言，如果我弄错了，肯定需要更正。您需要使用REST服务器中的数据填充下拉列表，对吗？在代码中，我看到输入和下拉字段具有相同的ng model=property.value。我有点困惑。是的，你是对的。下拉列表是从外部ng repeat创建的，它呈现contactDetail.properties中的所有属性。但每个属性都需要不同类型的输入控件。例如生日日期选择器或性别、语言等下拉列表。我正在搜索一种通用机制，根据property.displaystyle\u I的值，通过$http.get-call填充下拉列表。根据所选变量的类型，您可以使用ng show/ng hide或ng if或ng开关显示/隐藏字段。如果这是您想要的。我想您需要告诉ng repeat按property.value跟踪。ng repeat有track by属性。给我点时间。我需要检查一下这个。

<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>