嵌套手风琴中的Angularjs单选按钮不保留值

Question

我遇到了问题。如果我只有一个站点（一个手风琴），它可以正常工作，但是当我添加两个或更多单选按钮时，不会保留选择，这些站点是即时添加的

JavaScript

$scope.proposal2      = {sites:[{}]};

$scope.addSite = function(type){      // function to add sites
    $scope.proposal2.sites.push({});
}

HTML

<div class="ibox-content">
   <div class="form-group">
      <!-- panel accordion1 -->
      <div class="panel-group" id="accordion1">
         <div class="panel panel-default" ng-repeat="site in proposal2.sites">
            <div class="panel-heading">
               <h5 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion1" href="/proposal/new#collapse{{$index}}">Site {{$index}}</a>
               </h5>
            </div>
            <div id="collapse{{$index}}" class="panel-collapse collapse">
               <div class="panel-body">
                  <div class="accordion-inner">
                     <!-- panel accordion2 -->
                     <div class="panel-group" id="accordion-{{$index}}">
                        <div class="panel panel-default" ng-repeat="catf in categories | filter:{parent:1}">
                           <div class="panel-heading">
                              <h5 class="panel-title">
                                 <a data-toggle="collapse" data-parent="#accordion-{{$parent.$index}}" href="/proposal/new#collapse{{catf.id}}{{$parent.$index}}">{{catf.name}}</a>
                              </h5>
                           </div>
                           <div id="collapse{{catf.id}}{{$parent.$index}}" class="panel-collapse collapse">
                              <div class="panel-body">
                                 <label class="radio-inline" ng-repeat="cats in categories | filter:{parent:catf.id}">
                                 <input type="radio" name="type{{catf.id}}-{{$parent.$index}}" value="{{cats.id}}" ng-model="catf.cater" required="true" ng-change=""> {{cats.name}}
                                 </label>
                              </div>
                           </div>
                        </div>
                     </div>
                     <!-- panel accordion2 -->
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- panel accordion1 -->
   </div>
</div>

当我选择 Nec 或 panasonic 时，它会删除以前从“电话系统”上的其他手风琴中选择的选项，它仅在我只有在现场（一个手风琴）时才有效，如果我添加更多网站（更多手风琴）它不会不工作

在此图像上显示，当我在其他站点（其他手风琴）上选择 Nec 或松下时，先前的选择被删除

到目前为止我已经尝试过

item.cater
$parent.item[catf.id][$parent.$index].cater
item[$parent.$index].cater

这些都不起作用

提前致谢！

Answer 1

它的行为是这样的，因为单选按钮的 ng-model="catf.cater" 绑定到所有站点中同一对象的 Cater 属性。至少，我是这么认为的。您没有提供足够的信息来确定。

您没有每个站点的类别对象。您的 ng-model 应该绑定到每个站点的特定对象。例如：ng-bind="site.categories[catf.id].selectedValue"

Answer 2

我发现解决方案现在有效

我犯了两个错误

解决方案

<input type="radio" name="type{{catf.id}}-{{$parent.$index}}-{{$parent.$parent.$index}}"  value="{{cats.id}}"  ng-model="site[$parent.$parent.$index].catf[catf.id].cats.id" required="true" ng-change="">

第一个错误控件的名字应该是：

name="type{{catf.id}}-{{$parent.$index}}-{{$parent.$parent.$index}}"

第二个 ng 模型

ng-model="site[$parent.$parent.$index].catf[catf.id].cats.id"

结果

Sites [ { "0": { "catf": { "2": { "cats": { "id": "9" } }, "4": { "cats": { "id": "12" } }, "5": { "cats": { "id": "13" } } } } }, { "1": { "catf": { "2": { "cats": { "id": "9" } }, "4": { "cats": { "id": "11" } } } } }, { "2": { "catf": { "2": { "cats": { "id": "10" } }, "4": { "cats": { "id": "11" } } } } } ]

谢谢大家。

Answer 3

您正在编辑站点数据，模型对象为site。所以所有数据都应该添加到site对象中。

现在您正在将网站数据添加到类别列表中。该列表只有一个实例可供每个站点重复使用。

存储站点的电话系统时，将其存储在site['phoneSystem']。将安全存储在site['security']等中。 所以在绑定中用ng-model="site[catf.id]"替换ng-model="catf.cater"。

这是一个更简洁的工作示例（没有与问题无关的手风琴面板）：

angular.module('myApp', [])
  .controller('MyCtrl', ['$scope',
    function($scope) {
      $scope.sites = [{
        name: 'site 1'
      }, {
        name: 'site 2'
      }];
      $scope.categories = [{
        id: 'phoneSystems',
        name: 'Phone Systems'
      }, {
        id: 'security',
        name: 'Security'
      }];
      $scope.choices = {
        'phoneSystems': [{
          name: 'NEC',
          id: 'nec'
        }, {
          name: 'Panasonic',
          id: 'panasonic'
        }],
        'security': [{
          id: 'ssl',
          name: 'Secure Sockets Layer'
        }, {
          id: 'none',
          name: 'No such thing'
        }]
      };
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app='myApp' ng-controller="MyCtrl">
  <h1>model data</h1>
  {{sites|json}}
  <h1>site list</h1>
  <div ng-repeat="site in sites">
    <h2>{{site.name}}</h2>
    <div ng-repeat="category in categories">
      <h3>{{category.name}}</h3>
      <label class="radio-inline" ng-repeat="choice in choices[category.id]">
        <input type="radio" value="{{choice.id}}" ng-model="site[category.id]" required="true">{{choice.name}}
      </label>
    </div>
  </div>
</body>

-- 编辑--

所以不要使用每个站点

{
    "0": {
        "catf": {
            "2": {
                "cats": {
                    "id": "9"
                }
            },
            "4": {
                "cats": {
                    "id": "12"
                }
            },
            "5": {
                "cats": {
                    "id": "13"
                }
            }
        }
    }
}

你最终会得到

{
    "id": "0",
    "2": "9",
    "4": "12",
    "5": "13"
}

这对我来说似乎更简单。 （虽然我建议使用更有意义的 ID。）

Answer 4

这一行的ng-model值是错误的

将此“ng-model="$parent.item[catf.id][$parent.$index].cater”替换为“ng-model="catf.cater"。

或者

浏览这段代码：

<!-- panel accordion1 -->   
<div class="panel-group" id="accordion1">
    <div class="panel panel-default" ng-repeat="site in proposal2">
        <div class="panel-heading">
            <h5 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion1" href="/proposal/new#collapse{{$index}}">Site {{$index}}</a>
            </h5>
        </div>
        <div id="collapse{{$index}}" class="panel-collapse collapse">
            <div class="panel-body">
            <div class="accordion-inner">
            <!-- panel accordion2 -->                               
                <div class="panel-group" id="accordion-{{$index}}">
                    <div class="panel panel-default" ng-repeat="catf in site.item" >
                        <div class="panel-heading">
                            <h5 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion-{{$parent.$index}}" href="/proposal/new#collapse{{catf.id}}{{$parent.$index}}">{{catf.name}}</a>
                            </h5>
                        </div>
                        <div id="collapse{{catf.id}}{{$parent.$index}}" class="panel-collapse collapse">
                            <div class="panel-body">
                                <label class="radio-inline" ng-repeat="cats in catf.item">
                                 <input type="radio" name="type-{{$parent.$parent.$index}}-{{$parent.$index}}"  value="{{cats.name}}"  ng-model="catf.cater" required="true" ng-change=""> {{cats.name}}
                                    {{$parent.$parent.$index}}{{$parent.$index}}{{$index}}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            <!-- panel accordion2 -->   
            </div>
            </div>
        </div>
    </div>
</div>
<!-- panel accordion1 -->
<div ng-repeat="site in proposal2">
   <div ng-repeat="siteitems in site.item">
         {{site.name}} result = {{siteitems.cater}}<br /><br />
   </div>
</div>

你的 $scope 数据数组是这样的

$scope.proposal2 = [{
                            'name' : 'Site 1',
                            'item' : [
                                        {
                                            'name' : 'Phone Sysyem',
                                            'cater': '',
                                            'item' : [{'name' : 'Phone Sysyem - 1'},{'name' : 'Phone Sysyem - 2'}]
                                        },
                                        {
                                            'name' : 'Security',
                                            'cater': '',
                                            'item' : [{'name' : 'Security - 1'},{'name' : 'Security - 2'}]
                                        },
                                        {
                                            'name' : 'Copies',
                                            'cater': '',
                                            'item' : [{'name' : 'Copies - 1'},{'name' : 'Copies - 2'}]
                                        }
                                      ]
                            },
                            {
                                'name' : 'Site 2',
                                'item' : '',
                            }];