Home > Developer > Web Develop
This article is also posted in my public number " My Sky "
check box
The check box has only two values: TRUE or FALSE, so in Angularjs, it is common to bind the Ng-model of the check box to a Boolean property that determines its tick state by both Boolean values and sets the property value to be bound to true or false by its tick state. Let's look at the following example:
<body ng-app= "myApp" ng-controller= "Person" >
<form ng-submit= "Submit ()" Name= "MyForm" >
<p> Occupation:
<input type= "checkbox" ng-model= "User.jobs.engineer" > Engineer
<input type= "checkbox" ng-model= "User.jobs.designer" > Designer
<input type= "checkbox" ng-model= "User.jobs.teacher" > Teachers
</p>
<input type= "Submit" value= "Submission" >
<input type= "button" value= "Select Teacher" ng-click="Select_teacher ()">
</form>
</body>
<script>
var app=angular.module ("MyApp", []);
App.controller ("Person", function ($scope) {
$scope. User={jobs:{engineer:true,designer:false,teacher:false}};
$scope. Submit=function () {
Alert (json.stringify ($scope. User));
};
$scope.Select_teacher=function () {
$scope. user.jobs.teacher=true;
}
});
</script>
Sample Code Angularjs_16.html
Analyzing the above example, we have added three checkboxes to show occupations, namely "engineer", "designer" and "teacher", and bind their ng-model to the corresponding attributes in User.jobs. In the controller code, there is a code like this:
$scope. User={jobs:{engineer:true,designer:false,teacher:false}};
We set the initial values for each property in User.jobs, where engineer is true and the others are false, so that after the page is loaded, the "engineer" check box is checked. Of course, this sentence can be omitted if you do not need to set the check box in the initial stage. But one thing to note is that in both cases, the value of jobs is different when the data is submitted, assuming that we have checked the "engineer" and the "designer" after the page has been loaded, instead of the "teacher", submit the data at this time:
If we manually set the initial value of jobs, the submitted data is:
{"Jobs": {"Engineer": True, "designer": True, "Teacher": false}}
If we do not set the initial value of jobs, the data submitted is:
{"Jobs": {"Engineer": True, "designer": True}}
In the second case, we found that the teacher attribute, which was not checked by the "Teacher" checkbox, did not appear in the submitted data. Pay attention to this point.
The method Select_teacher (), which is bound in the button "Select Teacher", demonstrates that if you use code to control the check box, simply set the property value of the binding to true or false to check or uncheck.
In some cases, we need more semantic values to express true or false, such as we want to be "Yes" and "No", so just add the following instruction in the checkbox:
Ng-true-value= "' Yes '" ng-false-value= "' No '"
Note that single quotes in double quotation marks cannot be omitted.
In practice, our checkboxes are most likely to be obtained from the background data and dynamically organized, so we use ng-repeat, and we will make the above example changes to simulate the scenario. Take a look at the following code:
<body ng-app= "myApp" ng-controller= "Person" >
<form ng-submit= "Submit ()" Name= "MyForm" >
<spanng-repeat= "job in User.jobs">
<input type= "checkbox" ng-model= "job.selected" ng-true-value= "' Yes '" ng-false-value= "' No '" >{{job.label}}
</span><br>
<input type= "Submit" value= "Submission" >
<input type= "button" value= "Select Teacher" ng-click= "Select_teacher ()" >
</form>
</body>
<script>
var app=angular.module ("MyApp", []);
App.controller ("Person", function ($scope) {
$scope. User={jobs:[{label: ' Engineer ', Value: ' Engineer ', selected: ' Yes ',
{label: ' Designers ', Value: ' Designer ', selected: ' No '},
{label: ' Teacher ', Value: ' Teacher ', selected: ' No '}]};
$scope. Submit=function () {
AlertAngular.tojson ($scope. User.jobs));
};
$scope. Select_teacher=function () {
for (Var i=0;i< $scope. user.jobs.length;i++) {
if ($scope. user.jobs[i].value== "Teacher") {
$scope. user.jobs[i].selected= ' Yes ';
return false;
}
}
}
});
</script>
Sample Code Angularjs_17.html
Let's take a look at the above code and compare it to the previous code. We put the checkboxes in a span, set the ng-repeat instruction for the span, traverse the objects from the User.jobs, and show the checkboxes in turn. The Tick status of the check box is specified by job.selected, and Ng-true-value and Ng-false-value are specified, and the text displayed on the check box is specified by Job.label.
In the controller code, we declare an array object, jobs, to hold the name (value) of each occupation, the display text (label), and the initial tick state (selected).
It is important to note in the submit code that we use Angularjs's own method Angular.tojson () to serialize the jobs object to JSON, not the previous json.stringipy () method. The difference is that because in the example rollup, we display the check box in a no-repeat way, so Angularjs adds the intrinsic property "$ $hashKay" to the Job object, which is not needed for our actual application. The Angular.tojson () method removes the intrinsic attributes that are automatically added, making the commit data consistent with our application.
In the Select_teacher () method that handles the "selected teacher", we traverse jobs to find the job object with value equal to "teacher", change its Seleted property to "Yes", Since we have set the check box to ng-true-value= ' Yes ', then the "Teacher" checkbox is checked.
Sample code for this series
Https://github.com/panyongwow/angularJS
AngularJS (vi): Form-check box
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
