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>

Behavior 1

当我选择Nec或panasonic时，它会删除之前从其他手风琴中选择的选项，电话系统＆＃34;它只适用于我现场（一个手风琴），如果我添加更多的网站（更多的手风琴），它不起作用

Behavior 2

在此图像上显示我在其他网站（其他手风琴）上选择Nec或panasonic时删除了之前的选择

到目前为止，我已经尝试了

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

这些都不起作用

提前致谢！

Answer 1

此行中的ng-model值错误

替换此＆＃34; ng-model =＆＃34; $ parent.item [catf.id] [$ parent。$ index] .cater＆＃34;使用＆＃34; ng-model =＆＃34; catf.cater＆＃34;。

或者

完成此代码：

<!-- 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' : '',
                            }];

Answer 2

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

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

存储网站的电话系统时，请将其存储在site['phoneSystem']中。将安全性存储在site['security']等。因此，在绑定中将ng-model="catf.cater"替换为ng-model="site[catf.id]"。

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

＆＃13;

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

＆＃13;

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

＆＃13;

- 编辑 -

所以不要使用每个网站

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

你最终会

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

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

Answer 3

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

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

Answer 4

我发现解决方案现在正在运行

我有两个错误

解决方案

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

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" } } } } } ]

谢谢大家。

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

4 个答案: