angularjs checkbox双向绑定

最新推荐文章于 2025-03-16 02:50:43 发布

原创最新推荐文章于 2025-03-16 02:50:43 发布 · 7.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#angualrjs #html #checkbox

angularjs 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在AngularJS中实现复选框和单选按钮的双向数据绑定，通过具体示例详细展示了ng-repeat指令下的绑定技巧及注意事项。

1.首先有这样一个对象，这个对象我不知道里面具体的属性和属性值，使用checkbox如何实现双向绑定？

{
"title":true,
"tel":false,
"price":true,
"info":true
}

1>html

<div class="padding-tb-10">
                <label >分词字段：</label>
                <span class="label label-default">所有字段</span>
                    <label class="checkbox-inline" ng-repeat="(key, value) in segmentColumn">
                        <input type="checkbox" name="segmentType" ng-model="segmentColumn[key]"   ng-true-value="true" ng-false-value="false"  > {{key}}
                    </label>
            </div>

2>controller

$scope.segmentColumn={
	"title":false,
	"tel":true,
	"price":true,
	"info":true
}

3>页面

2.radio双向绑定没什么可说的

<label class="checkbox-inline">
    <input type="radio" name="segmentType" ng-model="analysisProject.segmentType"     value="BaseAnalysis"  > 基本分词
</label>
<label class="checkbox-inline">
    <input type="radio" name="segmentType" ng-model="analysisProject.segmentType" value="ToAnalysis" > 精准分词
</label>
<label class="checkbox-inline">
    <input type="radio" name="segmentType" ng-model="analysisProject.segmentType" value="NlpAnalysis" > nlp分词
</label>
<label class="checkbox-inline">
    <input type="radio" name="segmentType" ng-model="analysisProject.segmentType" value="IndexAnalysis" > 面向索引分词
</label>

今天发现在ng-repeat下并不能成功获取绑定值。

ng-repeat会在上一级作用域名中创建一个子作用域。

此时如果需要在子作用域中调用父作用域的变量，则可以使用$parent.variableName来调用。

<label class="checkbox-inline" ng-repeat="dic in dictionaries">

    <input type="radio" name="dictionaryId" value={{dic.id}} ng-model="$parent.dictionaryId"  />{{dic.id}} {{dic.name}}

</label>