当我在选择中选择值时选中复选框

Question

我使用一个 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>

有什么想法或建议吗？

Answer 1

首先需要添加on-remove和on-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'}
]
};

这是带有演示的 PLNKR 只需更改您的数据。