下拉選單選擇輸入框樣式
阿新 • • 發佈：2019-02-17
<script type="text/javascript" src="js/angular.min.js" ></script>
<style>
.ip {
border: 1px solid red;
}
</style>
</head>
<body ng-app="MyApp" ng-controller="MyCont">
<select ng-change="sel()" ng-model="xuan" ng-init="xuan='只有輸入框樣式變化'">
<option>只有輸入框樣式變化</option>
<option>顯示詳細資訊</option>
<option>點選時顯示效果</option>
</select><br /> 輸入密碼
<input type="text" ng-model="pwd" class="{{pass}}" /><br /> 重複密碼
<input type="text" ng-model="pwd1" class="{{pass}}" /><br />
<button ng-click="cli()">提交</button>
<ul class="ul" ng-hide="hi">
<li ng-repeat="li in xin">{{li}}</li>
</ul>
<script type="text/javascript">
var mo = angular.module("MyApp", []);
mo.controller("MyCont", function($scope) {
$scope.sel = function() {
var aa = $scope.xuan;
$scope.xin = [];
if(aa == "只有輸入框樣式變化") {
var pwd = $scope.pwd;
var pwd1 = $scope.pwd1;
if(pwd == undefined || pwd1 == undefined) {
$scope.pass = "ip";
}
if(pwd.length <= 6 || pwd1.length <= 6) {
$scope.pass = "ip";
}
if(pwd != pwd1) {
$scope.pass = "ip";
}
} else if(aa == "顯示詳細資訊") {
var pwd = $scope.pwd;
var pwd1 = $scope.pwd1;
$scope.pass = "vp";
if(pwd == undefined || pwd1 == undefined) {
$scope.xin.push("密碼不能為空");
}
<style>
.ip {
border: 1px solid red;
}
</style>
</head>
<body ng-app="MyApp" ng-controller="MyCont">
<select ng-change="sel()" ng-model="xuan" ng-init="xuan='只有輸入框樣式變化'">
<option>只有輸入框樣式變化</option>
<option>顯示詳細資訊</option>
<option>點選時顯示效果</option>
</select><br /> 輸入密碼
<input type="text" ng-model="pwd" class="{{pass}}" /><br /> 重複密碼
<input type="text" ng-model="pwd1" class="{{pass}}" /><br />
<button ng-click="cli()">提交</button>
<ul class="ul" ng-hide="hi">
<li ng-repeat="li in xin">{{li}}</li>
</ul>
<script type="text/javascript">
var mo = angular.module("MyApp", []);
mo.controller("MyCont", function($scope) {
$scope.sel = function() {
var aa = $scope.xuan;
$scope.xin = [];
if(aa == "只有輸入框樣式變化") {
var pwd = $scope.pwd;
var pwd1 = $scope.pwd1;
if(pwd == undefined || pwd1 == undefined) {
$scope.pass = "ip";
}
if(pwd.length <= 6 || pwd1.length <= 6) {
$scope.pass = "ip";
}
if(pwd != pwd1) {
$scope.pass = "ip";
}
} else if(aa == "顯示詳細資訊") {
var pwd = $scope.pwd;
var pwd1 = $scope.pwd1;
$scope.pass = "vp";
if(pwd == undefined || pwd1 == undefined) {
$scope.xin.push("密碼不能為空");
}