Issue with AngularJS textarea - javascript

I'm new at Angular.js, and I have a problem with a textarea element. When I write something and I click the add this step button , the text that I put in my text area is still there, but I don't know why.
HTML code:
<div class="form-group">
<label for="stepAdd">Step</label>
<textarea class="form-control" rows="3"
id="stepAdd" placeholder="Describe the solution to solve the problem step by step"
ng-model="textStep" >
</textarea>
Add this step
Angular code :
$scope.addStep = function(text) {
if(text === undefined) return;
var textFormat = text.trim();
$scope.textStep = '';
$scope.newDoc.steps.push({
text: textFormat,
editing : false,
images : []
});
}

var app = angular.module('app', []);
app.controller('firstCtrl', function($scope) {
//make sure that you define $scope.newDoc
$scope.newDoc = {
steps: []
}
$scope.addStep = function(text) {
if (text === undefined) return;
var textFormat = text.trim();
$scope.textStep = '';
$scope.newDoc.steps.push({
text: textFormat,
editing: false,
images: []
});
};
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
<div class="form-group">
<label for="stepAdd">Step</label>
<textarea class="form-control" rows="3" id="stepAdd" placeholder="Describe the solution to solve the problem step by step" ng-model="textStep"></textarea>
<br/>
Add this step
<hr/>
<h3>newDoc:</h3>
<pre> {{newDoc | json}}</pre>
</div>
</body>

Related

How to validate if a checkbox is checked after submit with AngularJs?

I'm using AngularJs & Javascript for my very first application. I'm triying to show info from an API as a checkbox. Right now it's working, but, how can i validate if any of the checkbox options are checked with a submit button?
I was searching here in stackoverflow and find a way, but it's working only with the last option. Here's a part of my html:
<form name="imtesting" ng-submit="imtesting.$valid && validate()" ng-show="$ctrl.coupons.length > 0">
<ul>
<li ng-repeat="c in $ctrl.coupons">
<input type="checkbox"
name="couponBox"
ng-checked="c.Select"
ng-click="$ctrl.selectOne(c)"
ng-model="formData.couponBox" required/>{{c.CodeCoupon}}
<br>
</li>
</ul>
<span ng-show="submitted == true && imtesting.couponBox.$error.required">Select at least one cupon!</span></form>
And the button:
<button type="submit" ng-click="submitted = true">Save</button>
Hope you can help me. It's a new world for me this job.
Thanx in advance.
Well, why not create a validation function on your Controller.
Loop over all your coupon objects and check if they have a value.
e.g
$scope.requireCoupon = function() {
var nrCouponsChecked = 0;
$ctrl.coupons.forEach(function(coupon) {
if (coupon.Select) {
nrCouponsChecked++;
}
});
}
// and in your template you would use it like
<span ng-show="submitted == true && requireCoupon()">Select at least one cupon!</span>
That is because you are using the same ng-model for all the checkboxes by doing this:
ng-model="formData.couponBox"
The previous code sets an ng-model (formData.couponBox) for all of the checkboxes.
A valid option would be create an object which will contains the ng-model of every checkbox, like this (Demo with some fake data)
angular
.module('app', [])
.controller("myCtrl", function() {
var wizard = this;
wizard.$ctrl = {
//fake data
coupons: [{
Select: false,
CodeCoupon: "1st"
}, {
Select: false,
CodeCoupon: "2nd"
}],
//create an object for storing the checkbox models
checkBoxModels: {},
checkIfAnyChecked: checkIfAnyChecked
}
return wizard.$ctrl;
function checkIfAnyChecked() {
for (var k in wizard.$ctrl.checkBoxModels) {
if (wizard.$ctrl.checkBoxModels.hasOwnProperty(k) && wizard.$ctrl.checkBoxModels[k]) {
//for instance, if 3rd checkbox is checked, wizard.$ctrl.checkBoxModels will be {3: true} and so on...
return true;
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-app="app" ng-controller="myCtrl as ctrl">
<ul>
<li ng-repeat="c in ctrl.coupons">
<input type="checkbox" name="couponBox" ng-checked="c.Select" ng-click="ctrl.selectOne(c)" ng-model="ctrl.checkBoxModels[$index]" required/>{{c.CodeCoupon}}
<br>
</li>
</ul>
<span ng-show="submitted == true && !ctrl.checkIfAnyChecked()">Select at least one cupon!</span>
<br />
<button type="submit" ng-click="submitted = true">Save</button>
</div>
You have to create dynamic names for each checkbox input to do validations.
Here is an example since you have not provided the dataset.
var app=angular.module("App",[]);
app.controller("AppCtrl",function($scope){
var selectedFruits = {
Mango: true
};
var calculateSomeSelected = function() {
$scope.someSelected = Object.keys(selectedFruits).some(function (key) {
return selectedFruits[key];
});
};
$scope.formData = {
selectedFruits: selectedFruits
};
$scope.fruits = [{'name':'Apple'}, {'name':'Orange'}, {'name':'Banana'}, {'name':'Mango'}];
$scope.checkboxChanged = calculateSomeSelected;
calculateSomeSelected();
});
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<script data-require="angular.js#1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="AppCtrl">
<form class="Scroller-Container" name="multipleCheckbox" novalidate="" ng-submit="submitForm()">
<h3>What would you like?</h3>
<div ng-repeat="fruit in fruits">
<input type="checkbox" ng-model="formData.selectedFruits[fruit.name]" ng-change="checkboxChanged()" ng-required="true" name="fruits_{{$index}}" /> {{fruit.name}}
<p style="color: red;" ng-show="multipleCheckbox.$submitted&&multipleCheckbox.fruits_{{$index}}.$error.required">You must choose {{fruits[$index].name}} fruit</p>
</div>
<input type="submit" value="Submit">
</form>
<pre>Fruits model:
{{formData.selectedFruits | json}}</pre>
</div>
</body>
</html>

ng-controller Angular capitalize input

I want the first typed letter turn into a capital letter, but struggeling with Angular. Maybe it is a little detail that I missed out, so a fresh eye to look at this would be helpful.
var app = angular.module("todoApp", []);
app.filter("NameInput", function(){
return function(input, scope){
if (input!=null)
input = input.toLowerCase();
return input.substring(0,1).toUpperCase()+input.substring(1);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app="todoApp" ng-cloak>
<div id="wrapper">
<div ng-controller="NameInput">
<label>Name:</label>
<input id="name-input" type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}</h1>
</div>
</div>
</body>
Here you go...
I think this might help you
var app = angular.module("todoApp", []);
app.filter("NameInput", function() {
return function(input) {
if (input != null) {
input = input.toLowerCase();
return input.substring(0, 1).toUpperCase() + input.substring(1);
}
}
})
.controller('NameInput', function($scope) {
$scope.yourName = "";
});
<body ng-app="todoApp" ng-cloak>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<div id="wrapper">
<div ng-controller="NameInput">
<label>Name:</label>
<input id="name-input" type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName | NameInput}}</h1>
</div>
</div>
</body>

Changing button name depending on inputs with AngularJS

How to change button name that depends on if some inputs are empty or not
Example: if input1 and input2 is not empty but input3 is empty - button name will be "Test".
This is my code, but i doesn't work
<div ng-app="myApp">
<form action="lab2.php" method="POST" ng-controller="controller">
<label>ID</label>
<input type="number" name="id" ng-model="id" name="id"/>
{{id}}
<label>Name:</label>
<input name="name" ng-model="name" type="text"/>
<label>City:</label>
<input name="country" ng-model="country" type="text"/>
<button ng-bind="but" type="submit">{{getName()}}</button>
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('controller', function($scope) {
$scope.but="Operation";
$scope.id=0;
$scope.country="";
$scope.name="";
$scope.getName = function(){
if($scope.id==0 && $scope.name!=="" && $scope.country!=="")
{
return "INSERT";
}
if($scope.id!==0 && $scope.name=="" && $scope.country=="")
{
return "DELETE";
}
if($scope.id!==0 && $scope.name!=="" && $scope.country!=="")
{
return "UPDATE";
}
}
});
</script>
var app = angular.module("app",[]);
app.controller("MyCtrl" , function($scope){
$scope.name1 = "Test";
$scope.name2 = "";
$scope.name3 = "Test3";
$scope.getName = function(){
if( $scope.name1 == "" && $scope.name2 == "" & $scope.name3 !== "")
return "Test";
return "Other";
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<input type="text" ng-model="name1">
<input type="text" ng-model="name2">
<input type="text" ng-model="name3">
<input type="button" name="{{getName()}}" value="{{getName()}}">
</div>
Try this:
<input ng-model="vm.input1" name="input1" type="text"/>
<input ng-model="vm.input2" name="input2" type="text"/>
<input ng-model="vm.input3" name="input3" type="text"/>
<button> {{(vm.input1 && vm.input2 && !vm.input3) ? 'Test' : 'Something Else' }} </button>
Something on these lines would work ...
jsfiddle: http://jsfiddle.net/0jeantca/3/
Hope this helps ...
By name do you mean the name attribute or the display text? The code below works for both.
In your template, you can write
<button name={{setName()}}>{{setName()}}</button>
and in your controller, you can write
$scope.setName = function()
{
// you can use switch here
var buttonName = "";
if($scope.input1 && $scope.input2 && !$scope.input3)
buttonName = 'Foo';
else
buttonName = 'Bar';
return buttonName;
}
Caution: As the input's change every time, the button text changes, it should be fine. But if you intend to change name attribute, then, it will cause a problem for the one who reads your code.

AngularJS 1.3 Migration Not Working

I have updated my script code to the following after reading about documentation on migrating from 1.2 to 1.3.
var app = angular.module("APP", []);
app.controller('Ctrl', function ($scope) {
$scope.id = [{
id: 'id #1'
}];
$scope.addNewId = function () {
var newId = $scope.id.length + 1;
$scope.id.push({
'id': 'id #' + newId
});
};
$scope.removeId = function (index) {
if (index >= 1) {
$scope.id.splice(index, 1);
}
};
});
This is the code for the form:
<!DOCTYPE html>
<html lang = "en" ng-app = "APP">
<head>
<meta charset = "utf-8">
<title>Add New ID</title>
<link rel="stylesheet" href="form.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script type = "text/javascript" src = "form.js"></script>
</head>
<body ng-controller="Ctrl">
<section>
<h1>Add New Stuff</h1>
<form name = "form" id = "form">
<div ng-model = "indiv">
<fieldset class="ids" data-ng-repeat="indiv in id">
<legend>ID</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name" size="60">&nbsp
<label for="age">Age:</label>
<input type="text" name="age" id="age" size="60">&nbsp
<button type="button" name="lookup" id="lookup">LOOKUP</button>&nbsp
<button class="remove" ng-click="removeId($index)">Remove ID</button><br>
</fieldset>
<br>
<button class="addfields" ng-click="addNewId()">Add ID</button>
</div>
<input type="submit" name="submit" id = "submit" value="SUBMIT">
</form>
</section>
</body>
It is supposed to add a new set of input fields to a form. Please help
An id attribute can't contain space nor sharp character here you are setting :
{id: 'id #1'}
May be a part of the answer if you're attributing this value to the id of each input in your ng-repeat.
can you show us the form ?

Why are my 'ng-clicks' and 'ng-shows' requiring I pass the controller alias along with the function being passed?

Sorry if this is dumb, but I'm pretty new to Angular.
Why is ng-click (and ng-show, but without the function) requiring that I pass the controller name along with the function being called?
My code works, I'm just wondering why some things don't work if I don't use "timeTrackerCtrl.something" ?
here's my code:
index.html
<!DOCTYPE html>
<html ng-app="timeTrackerApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="TimeTrackerController as timeTrackerCtrl">
<!-- Task Form Container -->
<div>
<!-- Task Form -->
<div>
<form name="taskForm" ng-submit="timeTrackerCtrl.addTask(tempTask)">
<input ng-model="timeTrackerCtrl.tempTask.name" required type="text" placeholder="what are you working on?" title="Task Name" />
<select ng-model="timeTrackerCtrl.tempTask.project" ng-options="project.name as project.name for project in timeTrackerCtrl.projects" title="name">
<option value="">+ project</option>
</select>
<input type="submit" value="▶" />
</form>
</div>
</div>
<!-- Tasks Container -->
<div id="taskContainer">
<!-- Live Preview -->
<div class="taskLine" ng-show="timeTrackerCtrl.tempTask.name">
<div class="date"><p>{{timeTrackerCtrl.today | date:'d MMM'}}</p></div>
<div>
<div ng-show="timeTrackerCtrl.tempTask.star" ng-click="timeTrackerCtrl.tempTask.star = false" class="star activeStar">★</div>
<div ng-hide="timeTrackerCtrl.tempTask.star" ng-click="timeTrackerCtrl.tempTask.star = true" class="star">☆</div>
<div class="taskName">{{timeTrackerCtrl.tempTask.name}}</div>
<div><span ng-show="timeTrackerCtrl.tempTask.project != null" class="projectBlock">{{timeTrackerCtrl.tempTask.project}}</span></div>
<div ng-repeat="tag in timeTrackerCtrl.tempTask.tags track by $index" class="tagBlock">{{tag}}</div>
</div>
</div>
<div ng-repeat="task in timeTrackerCtrl.tasks">
<div ng-show="task.timing" ng-click="timeTrackerCtrl.taskEnd(task.end);"></div>
<div>{{task.name}}</div>
<div>{{task.project}}</div>
<div ng-repeat="tag in task.tags track by $index">{{tag}}</div>
<div>{{task.end ? timeTrackerCtrl.finalTime(task.start,task.end) : 'currentTime'}}</div>
</div>
</div>
</body>
</html>
app.js
(function() {
var app = angular.module('timeTrackerApp', []);
app.controller('TimeTrackerController', function() {
this.tasks = taskObjects;
this.projects = projectsInfo;
this.today = Date.now();
this.tempTask = {};
this.addTask = function() {
this.tempTask.star = false;
this.tempTask.start = Date.now();
this.tempTask.timing = true;
this.tasks.push(this.tempTask);
this.tempTask = {};
};
this.taskEnd = function(taskend) {
taskend = Date.now();
alert(taskend);
return taskend;
};
this.finalTime = function(starttime,endtime) {
totalTime = endtime - starttime;
return totalTime;
};
});
var projectsInfo = [
{
...
}, {
...
}
];
var taskObjects = [
{
...
}, {
...
}
];
})();
You should use $scope for that.
I'd suggest you to take a look at Dan Wahlin's "AngularJS fundamentals". It's a really good tutorial to start with.

Categories

Resources