码迷,mamicode.com
首页 > Web开发 > 详细

angularjs的ng-change事件演示

时间:2017-10-31 15:27:29      阅读:382      评论:0      收藏:0      [点我收藏+]

标签:ng-model   没有   ges   表达   none   desc   jpg   练习   isp   

今天练习angularjs的ng-change事件。

比如用户作出选择时,系统所指定的选项中,没有用户合适的选项。此时我们可以让用户填写。

技术分享

 刚开始文本框是隐藏的。当用户选择了checkbox之后才会显示出来。
技术分享

 

在angularjs程序的model中IsVisible的值为false。

技术分享

 

这样子,程序在运行时,文本框就是隐藏的。

 

接下来,我需要在程序中,添加一个Checkbox:
技术分享

 

上面的ng-change的值就是一个angularjs的方名ShowHide:

技术分享

 

最后看看下图示例,相信你能看得懂与明白所表达的意思:

技术分享

 

完整的angularjs代码:

技术分享
 var appoo = angular.module(‘App1‘, []);

        appoo.controller(‘Ctrl1‘, function ($scope) {
            $scope.IsVisible = false;

            $scope.ShowHide = function () {
                $scope.IsVisible = $scope.ShowOtherDescript;
            };
        });
Source Code


完整的html代码:

技术分享
<div ng-app="App1" ng-controller="Ctrl1">        
            <input id="Checkbox1" type="checkbox" ng-model="ShowOtherDescript" ng-change="ShowHide()" />其它说明   
        
        <div ng-show="IsVisible">           
            <input id="Text1" type="text" />
        </div>
    </div>
Source Code

 

angularjs的ng-change事件演示

标签:ng-model   没有   ges   表达   none   desc   jpg   练习   isp   

原文地址:http://www.cnblogs.com/insus/p/7761456.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!