您的位置：首页技术文章
文章详情页

angular.js - 求一个angularJS写法

浏览：98日期：2024-10-13 13:09:43

问题描述

angular.js - 求一个angularJS写法A是下拉列表 BC是文本框。默认C文本框是隐藏。B文本框可用 。要实现当A下拉选择最后一个元素，B禁用同时C显示。A不选择最后一个元素，恢复原样。

<fieldset> <legend>Household Income Survey</legend> <p class='row'><p class='form-group col-xs-12 col-sm-6'> <label for='HouseholdSize' class='control-label'>I. How many people live in your home?</label> <select name='HouseholdSize' id='HouseholdSize'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='8+'>8+</option> </select></p><p class='form-group col-xs-12 col-sm-6'> <label for='HouseholdIncome' class='control-label'>II. Household Annual Income</label> <select name='HouseholdIncome' id='HouseholdIncome'><option value=''></option><option value='15171'>15171</option><option value='21590'>21590</option><option value='29101'>29101</option><option value='36612'>36612</option><option value='44123'>44123</option><option value='51634'>51634</option><option value='59145'>59145</option><option value='66656'>66656</option><option value='74167'>74167</option> </select></p> </p> <p id='HouseholdIncomeGroup'><label for='HouseholdIncome'>III. If there are more than 8 people living at your home, please write the annual household income here</label><p class='input-group'> <p class='input-group-addon'>$</p> <input type='text' name='' placeholder=''></p> </p></fieldset>

问题解答

回答1：

html代码：

<fieldset ng-controller='IncomeCtrl'> <legend>Household Income Survey</legend> <p class='row'><p class='form-group col-xs-12 col-sm-6'> <label class='control-label'>I. How many people live in your home? </label> <select ng-model='householdSize' ng-change='change()'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='8+'>8+</option> </select></p><p class='form-group col-xs-12 col-sm-6'> <label class='control-label'>II. Household Annual Income </label> <select ng-model='householdIncome' ng-disabled='showDefIncom'><option value=''></option><option value='15171'>15171</option><option value='21590'>21590</option><option value='29101'>29101</option><option value='36612'>36612</option><option value='44123'>44123</option><option value='51634'>51634</option><option value='59145'>59145</option><option value='66656'>66656</option><option value='74167'>74167</option> </select></p> </p> <p ng-show='showDefIncom'><label class='control-label'> III. If there are more than 8 people living at your home, please write the annual household income here</label><p class='input-group'> <p class='input-group-addon'>$</p> <input type='text' ng-model='defHouseholdIncome'></p> </p></fieldset>

JavaScript代码：

.controller(’IncomeCtrl’, function ($scope) { $scope.householdSize = 1; $scope.householdIncome = 15171; $scope.defHouseholdIncome = 0; $scope.showDefIncom = false; $scope.change = function () {$scope.showDefIncom = $scope.householdSize === ’8+’ ? true : false; };})回答2：

和 @nightire 的思路一样的，这里贴出代码部分：

html<body ng-app='app'> <p ng-controller='main'><select ng-options='item for item in items' ng-model='selVal' ng-init='selVal = items[0]'></select><input type='text' ng-model='b' ng-disabled='selVal===items[items.length-1]' placeholder='b'><input type='text' ng-model='c' ng-show='selVal===items[items.length-1]' placeholder='c'> </p> <script type='text/javascript'> var app = angular.module(’app’, []); app.controller(’main’, [’$scope’, function($scope) {$scope.items = [’1’, ’2’, ’3’, ’4’, ’5’]; }]); </script></body>

大概这样的。

回答3：

<select> 填充好，然后 ng-model 绑定作用域里一个属性，然后 $watch 这个属性，当条件满足时改变一个状态属性（预先定义好），最后将这个状态属性双向绑定给 B 的 ng-disabled 和 C 的 ng-show/ng-if 就行了吧。

上一条：angular.js - angularjs resizable控件下一条：angular.js - angularjs 路由使用resolve后报错
相关文章：
1. python - 关于matplotlib的x轴显示的问题2. mysql优化 - mysql慢查询copying to tmp table3. android 文件File删除问题4. javascript - vue生成一维码?求助！！！！！急5. ueditor上传服务器提示后端配置项没有正常加载，求助！！！！！6. css - .clearfix:after中为什么设置display: table7. 请教： 关于 python 反斜杠转义的疑问8. css - transform: translateY(-50%)在360浏览器极速模式下使得文字变模糊了9. angular.js - 怎样在使用ng-repeat属性的标签里面监听单个事件，使其能够单个改变CSS。10. nginx英文文档的WebSocket proxying部分没看太明白，麻烦推荐一点中文文章
排行榜
css - .clearfix:after中为什么设置display: table
css - .clearfix:after中为什么设置display: table
1. angular.js - js 点击事件onclick=“”，引号内的函数名字 可以为 变量吗
2. nginx英文文档的WebSocket proxying部分没看太明白，麻烦推荐一点中文文章
3. css - transform: translateY(-50%)在360浏览器极速模式下使得文字变模糊了
4. 请教： 关于 python 反斜杠转义的疑问
5. mysql优化 - mysql慢查询copying to tmp table
6. 为什么我ping不通我的docker容器呢？？？
7. golang - 用IDE看docker源码时的小问题
8. docker start -a dockername 老是卡住，什么情况？
9. mac连接阿里云docker集群，已经卡了2天了，求问？
10. android 文件File删除问题
热门标签