简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

Sharing of input examples in angularJS

高洛峰
Release： 2016-12-28 16:50:01
Original
981 people have browsed it

Here I will share with you an example of using the input command

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<script src="http://localhost:81/js/jquery.js">
</script>
<script src="http://localhost:81/js/angular.min.js">
</script>
<body ng-app="Demo">
<div ng-controller="TestCtrl">
    <input type="text" ng-model="a" test />
    <button ng-click="show(a)">查看</button>
</div>
</body>
<script>
   var app = angular.module(&#39;Demo&#39;, [], angular.noop);
   app.directive(&#39;test&#39;, function(){<br>　　　//input 指令的 link有第四个参数，$ctrl有些方法，你可以自己拿来用
     var link = function($scope, $element, $attrs, $ctrl){
    console.log( $ctrl )
       $ctrl.$formatters.push(function(value){
         return value.join(&#39;,&#39;);
       });
       $ctrl.$parsers.push(function(value){
         return value.split(&#39;,&#39;);
       });
     }
     return {compile: function(){return link},
             require: &#39;ngModel&#39;,
             restrict: &#39;A&#39;}
   });
   app.controller(&#39;TestCtrl&#39;, function($scope){
     $scope.a = [];
     //$scope.a = [1,2,3];
     $scope.show = function(v){
       console.log(v);
     }
   });
</script>
</html>
Copy after login

The code is very simple, friends can expand it freely, I hope you can like it

More related input examples in angularJS Please pay attention to the PHP Chinese website for articles!

Related labels：
angularJS input
source：php.cn
Previous article：Javascript implements input file upload image preview effect Next article：JavaScript learning summary (2) Array and object part
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Unable to get input element from website So I'm trying to get an input element from Twitter, but when I run it it keeps giving me a...
From 2024-04-06 18:59:57
0
1
442
JavaScript hover events on vendor-specific pseudo-elements I have the following htmlinput tag. $("input[type='range']::-webkit-slider-thumb"...
From 2024-04-06 15:35:24
0
1
274
Display nested array of objects in HTML table by iterating I have the following input containing an array of nested objects. summary is the parent ob...
From 2024-04-05 14:11:42
0
1
1373
Let React render the closing tag of the input? I have an unusual request. My website is built using React and I want people to be able to...
From 2024-04-03 23:01:01
0
1
320
Shopware 6 Plugin: How to remove boolean configuration and migrate it to multi-select configuration I have a Shopware6 plugin that is currently configured with a boolean reviewSkipModeration...
From 2024-04-03 23:09:28
0
1
410
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！