angular-ui-mention
Version:
Facebook-like @mentions for text inputs built around composability
49 lines (41 loc) • 1.45 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>AngularUI | ui-mention Example</title>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular.min.js"></script>
<!--<script src="../bower_components/angular/angular.min.js"></script>-->
<script src="../dist/mention.js"></script>
<script src="example.js"></script>
</head>
<body ng-app="example">
<h1>UI Mention</h1>
<h4><a href="https://github.com/angular-ui/ui-mention">Source Code</a></h4>
<p>
Facebook-like <strong>@mentions</strong> in your text inputs. Designed with composability in mind.
</p>
<div class="mention-container">
<textarea ui-mention mention-example
ng-model="post.message"
placeholder="Use @mention to trigger"
ng-trim="false"
></textarea>
<div class="mention-highlight"></div>
<ul ng-if="$mention.choices.length" class="dropdown">
<li ng-repeat="choice in $mention.choices" ng-class="{active:$mention.activeChoice==choice}">
<a ng-click="$mention.select(choice)">
{{::choice.first}} {{::choice.last}}
</a>
</li>
</ul>
</div>
<input ng-model="newValue" placeholder="New Value"><button ng-click="post.message=newValue">Set Value</button><br>
<p>
$mentions.mentions: {{$mention.mentions | json}}
</p>
<p>
ng-model (post.message): {{post.message | json}}
</p>
</body>
</html>