Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<div ng-app>
<div ng-controller="MyCtrl">
<button ng-click="randomName()">Select Random Name</button>
<div>Your name is: {{name}}</div>
</div>
</div>
<script>
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
var names = ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'];
var initCtrl = function(){
$scope.name = names[0];
}
$scope.randomName = function() {
$scope.name = names[Math.floor(Math.random()*names.length)];
}
initCtrl();
}
</script>
angular.module('myApp',[]);
function AppCtrl($scope) {
var names = ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'];
var initCtrl = function(){
$scope.name = names[0];
}
$scope.randomName = function() {
$scope.name = names[Math.floor(Math.random()*names.length)];
}
initCtrl();
}
<button id="btn">Select Random Name</button>
<div>Your name is: <span id="name"></span></div>
<script>
var names = ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'];
var setName = function(name) {
var nameElemnt = $("#name");
nameElemnt.text(name);
}
var selectRandomName = function() {
var randomName = names[Math.floor(Math.random()*names.length)];
setName(randomName);
}
// Initial name and button event
var init = function(){
setName(names[0]);
var btn = $("#btn");
btn.click(selectRandomName);
}
init();
</script>
var names = ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'];
var setName = function(name) {
var nameElemnt = $("#name");
nameElemnt.text(name);
}
var selectRandomName = function() {
var randomName = names[Math.floor(Math.random()*names.length)];
setName(randomName);
}
// Initial name and button event
var init = function(){
setName(names[0]);
var btn = $("#btn");
btn.click(selectRandomName);
}
init();
<button id="btn">Select Random Name</button>
<div>Your name is: <span id="name"></span></div>
<script>
var names = ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'];
var setName = function(name) {
var nameElemnt = document.getElementById("name");
nameElemnt.innerText = name;
}
var selectRandomName = function() {
var randomName = names[Math.floor(Math.random()*names.length)];
setName(randomName);
}
// Initial name and button event
var init = function(){
setName(names[0]);
var btn = document.getElementById("btn");
btn.onclick = selectRandomName;
}
init();
</script>
var names = ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'];
var setName = function(name) {
var nameElemnt = document.getElementById("name");
nameElemnt.innerText = name;
}
var selectRandomName = function() {
var randomName = names[Math.floor(Math.random()*names.length)];
setName(randomName);
}
// Initial name and button event
var init = function(){
setName(names[0]);
var btn = document.getElementById("btn");
btn.onclick = selectRandomName;
}
init();
<div id="app">
</div>
<script>
// --- JSX format ---
// Name component
var Name = React.createClass({
render: function() {
return <div>{this.props.name}</div>
}
});
// App component
var App = React.createClass({
names: ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'],
handleClick: function() {
var randomName = this.names[Math.floor(Math.random()*this.names.length)];
this.setState({name: randomName});
},
getInitialState: function() {
return {name: this.names[0] }
},
render: function() {
return <div>
<button onClick={this.handleClick}>Select Random Name</button>
<Name name={this.state.name} />
</div>;
}
});
// Init the react root element
ReactDOM.render(
<App />,
document.getElementById('app')
);
</script>
// Name component
var Name = React.createClass({
render: function() {
return <div>{this.props.name}</div>
}
});
// App component
var App = React.createClass({
names: ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'],
handleClick: function() {
var randomName = this.names[Math.floor(Math.random()*this.names.length)];
this.setState({name: randomName});
},
getInitialState: function() {
return {name: this.names[0] }
},
render: function() {
return <div>
<button onClick={this.handleClick}>Select Random Name</button>
<Name name={this.state.name} />
</div>;
}
});
// Init the react root element
ReactDOM.render(
<App />,
document.getElementById('app')
);
<button id="btn">Select Random Name</button>
<script type="text/html" id='container'>
<div>Your name is: <span id="name"><%= name %></span></div>
</script>
<div id="target"></div>
<script>
var names = ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'];
// Render the template with the data
var render = function(user){
var template = container.innerHTML;
target.innerHTML = _.template(template, user);
}
var selectRandomName = function() {
var randomName = names[Math.floor(Math.random()*names.length)];
render({name: randomName});
}
// Initial name and button event
var init = function(){
var btn = document.getElementById("btn");
btn.onclick = selectRandomName;
var user = {name: names[0]}
render(user);
}
init();
</script>
var names = ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'];
// Render the template with the data
var render = function(user){
var template = container.innerHTML;
target.innerHTML = _.template(template, user);
}
var selectRandomName = function() {
var randomName = names[Math.floor(Math.random()*names.length)];
render({name: randomName});
}
// Initial name and button event
var init = function(){
var btn = document.getElementById("btn");
btn.onclick = selectRandomName;
var user = {name: names[0]}
render(user);
}
init();
<div ng-controller="AppCtrl">
<button ng-click="randomName()">Select Random Name</button>
<button ng-click="resetName()">Reset Name</button>
<button ng-click="showAsUpperCase()">Show Name In Capital</button>
<div>Your name is: {{name}} {{lastName}}</div>
<div>Your name was updated {{updateCounter}} times</div>
</div>
<script>
angular.module('myApp',[]);
function AppCtrl($scope) {
var names = ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'];
var lastNames = ['Harris', 'Thompson', 'Lewis'];
var _initialName;
var initCtrl = function(){
$scope.name = names[0];
$scope.lastName = lastNames[0];
_initialName = $scope.name;
_initialLastName = $scope.lastName;
$scope.updateCounter = 0;
}
$scope.randomName = function() {
$scope.name = names[Math.floor(Math.random()*names.length)];
$scope.lastName = lastNames[Math.floor(Math.random()*lastNames.length)];
$scope.updateCounter++;
}
// New features..
$scope.resetName = function() {
$scope.name = _initialName;
$scope.lastName = _initialLastName;
$scope.updateCounter++;
}
$scope.showAsUpperCase = function() {
$scope.name = $scope.name.toUpperCase();
$scope.lastName = $scope.lastName.toUpperCase();
}
$scope.saveNameInDB = function() {
// Update backend with new name and last name
// ..
}
$scope.deleteNameInDb = function() {
// Remove name from backend
// ..
}
// And another 100 lines here with other features
initCtrl();
}
</script>
angular.module('myApp',[]);
function AppCtrl($scope) {
var names = ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'];
var lastNames = ['Harris', 'Thompson', 'Lewis'];
var _initialName;
var initCtrl = function(){
$scope.name = names[0];
$scope.lastName = lastNames[0];
_initialName = $scope.name;
_initialLastName = $scope.lastName;
$scope.updateCounter = 0;
}
$scope.randomName = function() {
$scope.name = names[Math.floor(Math.random()*names.length)];
$scope.lastName = lastNames[Math.floor(Math.random()*lastNames.length)];
$scope.updateCounter++;
}
// New features..
$scope.resetName = function() {
$scope.name = _initialName;
$scope.lastName = _initialLastName;
$scope.updateCounter++;
}
$scope.showAsUpperCase = function() {
$scope.name = $scope.name.toUpperCase();
$scope.lastName = $scope.lastName.toUpperCase();
}
$scope.saveNameInDB = function() {
// Update backend with new name and last name
// ..
}
$scope.deleteNameInDb = function() {
// Remove name from backend
// ..
}
// And another 100 lines here with other features
initCtrl();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment