`
bjtale
  • 浏览: 29607 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

ng-true-value注意问题

阅读更多

在使用angular.js(版本1.4.6)时,以下代码在渲染时出现异常:

<input type='checkbox' ng-model='cbValue'
				ng-true-value="{{someText}}" ng-false-value="BUMMER">
			Checkbox Value:{{cbValue}}

 异常信息片段截取:

angular.js:12450Error: [ngModel:constexpr] http://errors.angularjs.org/1.4.6/ngModel/constexpr?p0=ngFalseValue&p1=BUMMER
    at Error (native)
    at http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js:6:416
    at Hd (http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js:166:318)
    at Rd.checkbox (http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js:248:283)
    at link.pre (http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js:249:255)
    at $ (http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js:73:89)
    at K (http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js:61:354)
    at h (http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js:54:410)
    at K (http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js:61:487)
    at h (http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js:54:410) <input type="checkbox" ng-model="cbValue" ng-true-value="{{someText}}" ng-false-value="BUMMER" class="ng-pristine ng-untouched ng-valid">

 查看文档之后,发现自从1.3版本以后,对input[checkbox]标签的ng-true-value,ng-false-value指令不支持动态表达式,仅能使用常量,以下改写之后生效:

<input type='checkbox' ng-model='cbValue'
				ng-true-value="'PERFECT'" ng-false-value="'BUMMER'">
			Checkbox Value:{{cbValue}}

 对checkbox的值检测或绑定最好在Controller里写,在标签中使用指令比较不方便。

 

 

分享到:
评论

相关推荐

    AngularJS单选框及多选框实现双向动态绑定.docx

    &lt;input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.pingpong" /&gt; 乒乓球 &lt;input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like....

    获取焦点ng-focus实例

    &lt;input type="text" ng-model="inputValue" ng-focus="isFocused = true"&gt; ``` 在这种情况下,`isFocused`变量会在输入框获得焦点时被设置为`true`,失去焦点时可以使用`ng-blur`指令进行相应的处理。 在学习`ng-...

    angularJs复选框checkbox选中进行ng-show显示隐藏的方法

    ng-true-value=1 //代表选中的时候,值为1 ng-false-value=0 //代表未选中的时候,值为0 &lt;!doctype html&gt; &lt;html lang=en&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; [removed][removed] &lt;/head&gt; &...

    ng-options和ng-checked在表单中的高级运用(推荐)

    在AngularJS中,ng-options和ng-checked是两个非常重要的指令,它们在构建动态表单时起着关键作用。本文将深入探讨这两个指令的高级用法,帮助开发者更好地理解和利用它们的功能。 首先,我们来看ng-options。ng-...

    AngularJS 单选框及多选框的双向动态绑定.docx

    &lt;input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="phone.play_lights" /&gt; 呼吸灯 ``` 在JavaScript部分,可以看到`check`函数处理多选框的选中和取消选中事件。这个函数接收两个参数...

    angularJs的ng-class切换class

    在angular中为我们提供了3种方案处理class: 1:scope变量绑定 2:字符串数组形式。 3:对象key/value处理。...&lt;span ng-class={true: ng-click=isActive&gt;赛事介绍 &lt;span ng-class={true: 'btn02 ',

    ng-alain的sf如何自定义部件的流程

    在开发基于Angular的项目时,ng-alain是一个非常流行的企业级后台管理模板,它提供了丰富的功能和组件。本文将深入探讨ng-alain中sf(Simple Form)如何自定义部件,帮助开发者更好地满足特定需求。 一、自定义部件...

    AngularJs ng-change事件/指令的用法小结

    而对于和,表达式在元素值改变时执行,但在这种情况下,ng-model并不是绑定值的,而是绑定的选中状态,即true或false。 在实际应用中,ng-change指令常用于在表单元素值改变后立即进行数据校验或响应式地更新其他...

    AngularJS单选、复选框

    &lt;input type="checkbox" ng-model="fruits.orange" ng-true-value="'Orange'" ng-false-value="null"&gt;橙子 &lt;input type="checkbox" ng-model="fruits.banana" ng-true-value="'Banana'" ng-false-value="null...

    前端项目-ng-dialog.zip

    preCloseCallback: function(value) { if (/* some condition */) { return true; // 允许关闭 } else { return false; // 阻止关闭 } } }); ``` 此外,ngDialog还提供了事件监听机制,允许你在对话框的生命...

    AngularJS单选框及多选框实现双向动态绑定

    &lt;input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.pingpong" /&gt;乒乓球 &lt;input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like....

    深究AngularJS——ng-checked(回写:带真实案例代码)

    &lt;input type="checkbox" name="tagName" value="item.id" ng-click="select(item.id,$event)" ng-checked="isSelected(item.id)"&gt; &lt;!-- 显示列表项的名称 --&gt; {{item.shortName}} &lt;!-- 输出选择结果 --&gt; 结果...

    Angular中ng-options下拉数据默认值的设定方法

    `ng-options`则用来生成选项,它的语法是`label for value in array`,在这里,`label`是`Teacher.UserName`,`value`是`Teacher`对象本身,`array`是`$scope.TeacherList`,包含了所有教师的信息。 接下来,我们看...

    详解angularJs中关于ng-class的三种使用方式说明

    三、通过key/value对象的方式使用ng-class 第三种方法是使用一个对象字面量来定义需要绑定的class。这个对象的键是想要添加到元素上的class名称,而值是一个布尔表达式。这种方式可以同时根据多个条件来控制多个...

    AngularJS 单选框及多选框的双向动态绑定

    在AngularJS中,双向数据绑定是一项强大的特性,它允许视图和模型之间的数据自动同步。在处理表单元素,如单选...在实际开发中,要注意解决由于`ng-repeat`带来的作用域问题,确保数据能够准确地在模型和视图之间传递。

    浅谈AngularJS中ng-class的使用方法

    有三种方法: 1、通过$scope绑定(不推荐) 2、通过对象数组绑定 3、通过key/value键值对绑定 实现方法: 1、通过$scope绑定(不推荐): ...div ng-class={true:'selected',false:'unselected'}[is

    AngularJS中ng-class用法实例分析

    使用ng-class时的注意事项包括: - 确保不要与内联样式同时使用,因为这可能会导致样式覆盖问题。 - 在使用对象数组或key/value对时,重复的类名不会被重复添加。AngularJS会智能地根据表达式的真假值来决定是否添加...

    AngularJS的ng-repeat指令与scope继承关系实例详解

    在上述代码中,`ng-repeat`指令用在`&lt;input type="button"&gt;`元素上,它将遍历`$scope.buttons`数组,为每个按钮设置`value`属性并绑定`ng-click`事件处理函数`btnFunc`。注意,`ng-click`中直接使用`button`作为参数...

    angularjs表格ng-table使用备忘录

    &lt;input type="checkbox" ng-model="checkboxes.checked" id="select_all" name="filter-checkbox" value="" /&gt; ``` 在`&lt;tr&gt;`中,我们可以使用这个模板: ```html &lt;td width="30" style="text-align: left" ...

Global site tag (gtag.js) - Google Analytics