查看编译了多少字段
Check how many fields are compiled
我在使用 angularjs 和 angular material 时遇到问题。
在一个表单中,我有二十个 select 字段。我必须查看所有字段,因为我必须允许用户只编译 20 个字段中的三个。如果用户尝试编译第四个字段,该字段必须 return 空白(没有值 select)。
我给 HTML 只有四个字段,但确实是 20 个字段(我从 angular material 站点获取代码)。
<div ng-controller="SelectAsyncController" layout="column" layout-align="center center" style="padding:40px" ng-cloak>
<p>Select can call an arbitrary function on show. If this function returns a promise, it will display a loading indicator while it is being resolved:</p>
<div layout="column" layout-align="center center" style="height: 100px;">
<md-select placeholder="Assign to user" ng-model="field1" md-on-open="loadUsers()" style="min-width: 200px;">
<md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>
<md-select placeholder="Assign to user" ng-model="field2" md-on-open="loadUsers()" style="min-width: 200px;">
<md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>
<md-select placeholder="Assign to user" ng-model="field3" md-on-open="loadUsers()" style="min-width: 200px;">
<md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>
<md-select placeholder="Assign to user" ng-model="field4" md-on-open="loadUsers()" style="min-width: 200px;">
<md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>
<p class="md-caption">You have assigned the task to: {{ user ? user.name : 'No one yet' }}</p>
</div>
</div>
js:
$scope.user = null;
$scope.users = null;
$scope.loadUsers = function() {
// Use timeout to simulate a 650ms request.
return $timeout(function() {
$scope.users = $scope.users || [
{ id: 1, name: 'Scooby Doo' },
{ id: 2, name: 'Shaggy Rodgers' },
{ id: 3, name: 'Fred Jones' },
{ id: 4, name: 'Daphne Blake' },
{ id: 5, name: 'Velma Dinkley' }
];
}, 650);
};
});
有办法做类似的事情吗?
谢谢指教。
您可以在下面看到我提出的解决方案。
简要说明:我使用数组作为字段的模型,因此 <md-select>
指令由 ng-repeat 循环生成。具体每个select元素的模型就是字段项(数组的每一项)的值属性。
A $watch('fields', ...) 检查数组变化,它的侦听器计算已经填充的字段(使用函数 filledFieldsCount()
) 并验证计数是否等于允许的最大值...
请注意,$watch 将第三个参数设置为 true,以便深入观察数组项属性的变化:$scope.$watch('fields', listener, true);
angular
.module('MyApp', ['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function($scope, $timeout) {
$scope.fields = [
{ "name": "task1", "value": null, "enabled": true },
{ "name": "task2", "value": null, "enabled": true },
{ "name": "task3", "value": null, "enabled": true },
{ "name": "task4", "value": null, "enabled": true },
{ "name": "task5", "value": null, "enabled": true }
];
$scope.maxNrFields = 3;
$scope.users = null;
$scope.loadUsers = function() {
// Use timeout to simulate a 250ms request.
return $timeout(function() {
$scope.users = $scope.users || [
{ id: 1, name: 'Scooby Doo' },
{ id: 2, name: 'Shaggy Rodgers' },
{ id: 3, name: 'Fred Jones' },
{ id: 4, name: 'Daphne Blake' },
{ id: 5, name: 'Velma Dinkley' }
];
}, 250);
};
$scope.$watch('fields', function(newValue, oldValue) {
console.log("$watch");
if ($scope.filledFieldsCount()==$scope.maxNrFields) {
angular.forEach($scope.fields, function(field){
if (!field.value) field.enabled = false;
});
}
}, true);
$scope.filledFieldsCount = function() {
var count = 0;
angular.forEach($scope.fields, function(field){
count += field.value ? 1 : 0;
});
return count;
}
});
.alert {
text-align: center;
width: 100%;
color: red;
}
<html lang="en" >
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
</head>
<body>
<div ng-controller="AppCtrl as ctrl" class="md-padding" ng-cloak="" ng-app="MyApp">
<div layout="column" layout-align="center center" style="padding:40px" ng-cloak>
<div layout="column" layout-align="center center">
<md-select placeholder="Assign {{field.name}} to user" ng-repeat="field in fields" ng-model="field.value" ng-disabled="!field.enabled" md-on-open="loadUsers()" style="min-width: 200px;">
<md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>
</div>
</div>
<div class="alert" ng-show="filledFieldsCount()==3">3 task assigned!</div>
<hr>
<pre>filledFieldsCount = {{ filledFieldsCount() | json}}</pre>
<pre>fields = {{ fields | json}}</pre>
</div>
</body>
</html>
我在使用 angularjs 和 angular material 时遇到问题。 在一个表单中,我有二十个 select 字段。我必须查看所有字段,因为我必须允许用户只编译 20 个字段中的三个。如果用户尝试编译第四个字段,该字段必须 return 空白(没有值 select)。
我给 HTML 只有四个字段,但确实是 20 个字段(我从 angular material 站点获取代码)。
<div ng-controller="SelectAsyncController" layout="column" layout-align="center center" style="padding:40px" ng-cloak>
<p>Select can call an arbitrary function on show. If this function returns a promise, it will display a loading indicator while it is being resolved:</p>
<div layout="column" layout-align="center center" style="height: 100px;">
<md-select placeholder="Assign to user" ng-model="field1" md-on-open="loadUsers()" style="min-width: 200px;">
<md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>
<md-select placeholder="Assign to user" ng-model="field2" md-on-open="loadUsers()" style="min-width: 200px;">
<md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>
<md-select placeholder="Assign to user" ng-model="field3" md-on-open="loadUsers()" style="min-width: 200px;">
<md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>
<md-select placeholder="Assign to user" ng-model="field4" md-on-open="loadUsers()" style="min-width: 200px;">
<md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>
<p class="md-caption">You have assigned the task to: {{ user ? user.name : 'No one yet' }}</p>
</div>
</div>
js:
$scope.user = null;
$scope.users = null;
$scope.loadUsers = function() {
// Use timeout to simulate a 650ms request.
return $timeout(function() {
$scope.users = $scope.users || [
{ id: 1, name: 'Scooby Doo' },
{ id: 2, name: 'Shaggy Rodgers' },
{ id: 3, name: 'Fred Jones' },
{ id: 4, name: 'Daphne Blake' },
{ id: 5, name: 'Velma Dinkley' }
];
}, 650);
};
});
有办法做类似的事情吗? 谢谢指教。
您可以在下面看到我提出的解决方案。
简要说明:我使用数组作为字段的模型,因此 <md-select>
指令由 ng-repeat 循环生成。具体每个select元素的模型就是字段项(数组的每一项)的值属性。
A $watch('fields', ...) 检查数组变化,它的侦听器计算已经填充的字段(使用函数 filledFieldsCount()
) 并验证计数是否等于允许的最大值...
请注意,$watch 将第三个参数设置为 true,以便深入观察数组项属性的变化:$scope.$watch('fields', listener, true);
angular
.module('MyApp', ['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function($scope, $timeout) {
$scope.fields = [
{ "name": "task1", "value": null, "enabled": true },
{ "name": "task2", "value": null, "enabled": true },
{ "name": "task3", "value": null, "enabled": true },
{ "name": "task4", "value": null, "enabled": true },
{ "name": "task5", "value": null, "enabled": true }
];
$scope.maxNrFields = 3;
$scope.users = null;
$scope.loadUsers = function() {
// Use timeout to simulate a 250ms request.
return $timeout(function() {
$scope.users = $scope.users || [
{ id: 1, name: 'Scooby Doo' },
{ id: 2, name: 'Shaggy Rodgers' },
{ id: 3, name: 'Fred Jones' },
{ id: 4, name: 'Daphne Blake' },
{ id: 5, name: 'Velma Dinkley' }
];
}, 250);
};
$scope.$watch('fields', function(newValue, oldValue) {
console.log("$watch");
if ($scope.filledFieldsCount()==$scope.maxNrFields) {
angular.forEach($scope.fields, function(field){
if (!field.value) field.enabled = false;
});
}
}, true);
$scope.filledFieldsCount = function() {
var count = 0;
angular.forEach($scope.fields, function(field){
count += field.value ? 1 : 0;
});
return count;
}
});
.alert {
text-align: center;
width: 100%;
color: red;
}
<html lang="en" >
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
</head>
<body>
<div ng-controller="AppCtrl as ctrl" class="md-padding" ng-cloak="" ng-app="MyApp">
<div layout="column" layout-align="center center" style="padding:40px" ng-cloak>
<div layout="column" layout-align="center center">
<md-select placeholder="Assign {{field.name}} to user" ng-repeat="field in fields" ng-model="field.value" ng-disabled="!field.enabled" md-on-open="loadUsers()" style="min-width: 200px;">
<md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>
</div>
</div>
<div class="alert" ng-show="filledFieldsCount()==3">3 task assigned!</div>
<hr>
<pre>filledFieldsCount = {{ filledFieldsCount() | json}}</pre>
<pre>fields = {{ fields | json}}</pre>
</div>
</body>
</html>