[AngularJS] angular-formly: expressionProperties

angular-formly provides a very simple API to dynamically change properties of your field (like disabled, hidden, and required) using the powerful expressionProperties property on your field.

(function() {

    ‘use strict‘;

    var app = angular.module(‘formlyExample‘, [‘formly‘, ‘formlyBootstrap‘]);

    app.controller(‘MainCtrl‘, function MainCtrl() {
        var vm = this;
        vm.model = {};
        vm.fields = [
            {
                type: ‘checkbox‘,
                key: "control",
                templateOptions: {
                    label: ‘Click to show‘
                }
            },
            {
                type: ‘input‘,
                key: "nothing",
                templateOptions: {
                    label: "Show when checkbox checked"
                },
                expressionProperties: {
                    hide: function($viewValue, $modelValue, scope) {
                        console.log(scope.model.control);
                        return !scope.model.control;
                    }
                }
            }
        ];
    });

})();
时间: 2024-08-03 19:18:11

[AngularJS] angular-formly: expressionProperties的相关文章

AngularJs Angular数据类型判断

AngularJs Angular数据类型判断 angular.isArray 判断括号内的值是否为数组. 格式:angular.isArray(value); value: 被判断是否为数组的值. --------------------------------------------------------------- angular.isDate 判断括号内的值是否是一个时间. 格式:angular.isDate(value); value:被判断是否为时间的值. -----------

[Angularjs]angular ng-repeat与js特效加载先后导致的问题

写在前面 最近在项目中遇到这样的一个前端的bug,在ng-repeat中绑定的图片,有一个晃动的特效,在手机端浏览的时候,图片有时候会正常展示,有时就展示不出来.当时猜测是因为angularjs与特效的那些代码加载的先后顺序造成的.有了这样的猜测,就有查找解决方案的方向了. 系列文章 [Angularjs]ng-select和ng-options [Angularjs]ng-show和ng-hide [Angularjs]视图和路由(一) [Angularjs]视图和路由(二) [Angular

[ngx-formly] Use 3rd party Form Controls with Angular Formly / Custom type

In a real form you'll most likely want to add some 3rd party form controls. For example autocomplete fields, date-time pickers etc. In this lesson we're going to see how to use ng-select and configure it s.t. it can be used within our Formly form. cu

[AngularJS] Angular 1.5 $transclude with name slot

In Angular 1.5, there is no link and component. So use if you transclude, you cannot access the fifth arguement in link function, which is transcludeFn. But in v1.5, you can access $transclude in controller. And what you can do for that is check whet

[AngularJS] Angular 1.5 multiple transclude

If you know ui-router, multi-transclude should be easy for you also. In previou Angular version <1.4, one diretive can only have one transclude element. But now in Angular 1.5, you can give each transclude element a name, then you can have multi-tran

AngularJs angular.element

当导入jquery时, angular.element查询出来的是个jquery对象,也可以使用jquery的方式来查询 html: var node=document.getElementById("AttendanceManager"); var ele=angular.element(node); console.dir(ele); var ee=angular.element("#AttendanceManager"); console.dir(ee); 如

angular参考手册拷贝

AngularJS 参考手册 AngularJS 指令 本教程用到的 AngularJS 指令 : 指令 描述 ng-app 定义应用程序的根元素. ng-bind 绑定 HTML 元素到应用程序数据 ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据,并移除 HTML 字符串中危险字符 ng-bind-template 规定要使用模板替换的文本内容 ng-blur 规定 blur 事件的行为 ng-change 规定在内容改变时要执行的表达式 ng-check

Bootstrap+AngularJS对话框实例

<script type="text/javascript" src="/assets/JS/plugins/jquery.min.js"></script> <script type="text/javascript" src="/assets/JS/plugins/jquery-migrate.min.js"></script> <script type="t

AngularJS自定义表单控件

<!doctype html> <html ng-app="myApp"> <head> <script src="G:\\Source\\Repos\\GWD\\Gridsum.WebDissector.Website.ZC\\Gridsum.WebDissector.Website.ZC\\Pages\\dist\\assets\\lib\\angularjs\\angular.js"></script>

AngularJS自定义表单验证

<!doctype html> <html ng-app="myApp"> <head> <script src="G:\\Source\\Repos\\GWD\\Gridsum.WebDissector.Website.ZC\\Gridsum.WebDissector.Website.ZC\\Pages\\dist\\assets\\lib\\angularjs\\angular.js"></script>