【问题标题】:mark a checkbox when i choose a value in a select当我在选择中选择一个值时标记一个复选框
【发布时间】:2017-08-17 06:31:41
【问题描述】:

我正在使用一个 JSON 文件,我将这些值放在一个选择多个中,当我在选择中选择一个值时我试图标记一个复选框,但我不知道该怎么做

这是我的 JSON 文件

 "tipocasa": [
        {"tipo":"Propia" , "tipo_casa":1},
        {"tipo":"Rentada" , "tipo_casa":2},
        {"tipo":"Otro" , "tipo_casa":3}
    ]

这是我正在使用 ui-select 的选择代码

          <ui-select multiple ng-model="entrevistainicialModel.idcomportamiento"
                           ng-disabled="false"
                           search-enabled="true"
                           append-to-body="true"
                           class="form-control ">
                    <ui-select-match placeholder="Comportamientos">
                        {{$item.comportamiento}}
                    </ui-select-match>
                    <ui-select-choices repeat="multipleItem.idcomportamiento as multipleItem in datosJson[0].comportamientos | filter: $select.search">
                        {{multipleItem.comportamiento}}
                    </ui-select-choices>
                </ui-select>

这是复选框代码

         <label class="checkbox-inline custom-checkbox nowrap">
            <input align="center" type="checkbox" ng-model="entrevistainicialModel.idcomportamiento" value="1">
                            <span align="center">Propia</span>
                        </label>

             <label class="checkbox-inline custom-checkbox nowrap">
            <input align="center" type="checkbox" ng-model="entrevistainicialModel.idcomportamiento" value="1">
                            <span align="center">rentada</span>
                        </label>

         <label class="checkbox-inline custom-checkbox nowrap">
            <input align="center" type="checkbox" ng-model="entrevistainicialModel.idcomportamiento" value="1">
                            <span align="center">Otro</span>
                        </label>

有什么想法或建议吗?

【问题讨论】:

  • 复选框在哪里,您应该看到已选中?
  • 我已经修改了帖子。对不起
  • 是多个复选框??或者只有一个,因为您使用的是多选,并且您指定的模型与复选框相同。
  • 每个选项都有一个不同的复选框。但是我放置了相同的模型,因为当我选择我需要的值时,我不知道如何标记复选框。此复选框只是一个示例。提示是如何修改复选框代码。

标签: angularjs json ui-select


【解决方案1】:

首先需要添加on-removeon-select来更改型号。 并分配。根据您的需要添加到每个复选框。

我根据你的数据做了一个例子。

HTML

    <ui-select multiple ng-model="data.selected" on-remove="$item.selected=false" on-select="$item.selected = true" theme="bootstrap" sortable="true" close-on-select="false" style="width: 800px;">
    <ui-select-match placeholder="Comportamientos...">{{$item.name}}</ui-select-match>
    <ui-select-choices repeat="comportamiento in datosJson.comportamientos">
  {{comportamiento.name}}
    </ui-select-choices>
  </ui-select>              
  <p>Selected: {{data.selected}}</p>

  <div ng-repeat="item in datosJson.comportamientos">
    <input type="checkbox" ng-model="item.selected">{{item.name}}
    <br>
  </div>

控制器

$scope.datosJson = {
comportamientos:
  [
    {id:1, name:'comportamiento1'},
    {id:2, name:'comportamiento2'},
    {id:3, name:'comportamiento3'}
  ]
  };

这是带有DEMO 的plnkr 只需更改您的数据即可。

【讨论】:

  • 感谢您的支持!
  • 很高兴提供帮助,如果这满足请标记为正确。再见。
猜你喜欢
  • 2021-05-22
  • 1970-01-01
  • 1970-01-01
  • 2012-05-08
  • 2023-03-19
  • 2021-08-28
  • 2020-10-12
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多