I'm not getting result properly using append event instead of using ng-repeat in adding each name. Can you please help me how can I change added each name from a single input field. Tell me without using ng-repeat in this because ng-repeat functionality is not working to me for my further running functionalities, you can solve this using jquery or javascript if it's possible without using ng-repeat. Thanks in advance..
Here is JSBin
var app = angular.module('myapp', ['ngSanitize']);
app.controller('AddCtrl', function ($scope, $compile) {
$scope.my = {name: 'untitled'};
$scope.add_Name = function (index) {
var namehtml = '<label ng-click="selectName($index)">{{my.name}} //click<br/></label>';
var name = $compile(namehtml)($scope);
angular.element(document.getElementById('add')).append(name);
};
$scope.selectName = function (index) {
$scope.showName = true;
};
});
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0-rc.0/angular-sanitize.min.js"></script>
</head>
<body ng-controller="AddCtrl">
<button ng-click="add_Name($index)">Add Names</button>
<div id="add"></div><br/>
<form ng-show="showName">
<label>Name Change(?)</label><br/>
<input ng-model="my.name">
</form>
</body>
</html>
If I understand what you're looking for correctly this should work.
HTML:
<body ng-controller="AddCtrl">
<button ng-click="add_Name()">Add Names</button>
<div ng-repeat="item in names">
<label ng-click="selectName($index)">{{$index}}- {{item}} //click to change<br/></label>
</div>
<form ng-show="showName">
<label>Name Change at index {{nameIndex}}</label><br/>
<input ng-model="names[nameIndex]">
</form>
</body>
JS:
$scope.names = [];
$scope.add_Name = function(index){
$scope.names.push('untitled')
}
$scope.selectName = function (index) {
$scope.nameIndex = index;
$scope.showName = true;
};
Related
Having this js fiddle
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', MyController]);
function MyController($scope) {
$scope.value1 = $scope.value1;
$scope.value2 = "this is it: " + $scope.value1;
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<div ng-controller='MyController'>
<h1>Introduce your value:</h1>
<input type="text" ng-model="value1"></input></br>
<input type="text" ng-model="name" ng-change="value1"></input>
</div>
</html>
I want to introduce a value in the first input and to get it into the next one as "this is it: firstvalue".
You can achieve that easily using ng-change and using ng-model properly
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', MyController]);
function MyController($scope) {
$scope.value1 = undefined;
$scope.value2 = undefined;
$scope.onValue1Change = function(){
$scope.value2 = "this is it: " + $scope.value1;
};
}
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<div ng-controller='MyController'>
<h1>Introduce your value:</h1>
<input type="text" ng-model="value1" ng-change="onValue1Change()"></input></br>
<input type="text" ng-model="value2"></input>
</div>
</html>
apply required filed for some filed in my form but my form is created using the custom directive, So Html is created Dynamically. I am using ng-repeat, i need to show some fields are required when user enter the submit button, but it is showing all fields is required.
<div ng-repeat="item in items">
<input type=[item.name]>
</div>
<p ng-show="ErrorMsg">Error Message </p>
when i am checking the controller logic
Controller.js
$scope.ErrorMsg = false;
if(item.value == null){
$scope.ErrorMsg = true;
}
But it is showing all fields for error msg. Please suggest me how to approach
Thanks in Advance!
I create a simple plunkr about angularjs dynamic form validation, please refer here:http://plnkr.co/edit/7OJHKsJPoHNqeeStBtnh.
// Code goes here
var myApp = angular.module('myApp',[]);
myApp.controller('DemoController', ['$scope', function($scope) {
function setTouched(form) {
angular.forEach(form, function (value, key) {
if (!/^\$/.test(key)) {
form[key].$setTouched();
}
});
}
var config = [];
for (var i = 0; i < 10; i++) {
var item = {};
item.name = 'input' + i;
item.required = (i%2 === 0) ? true : false;
config[i] = item;
}
$scope.config = config;
$scope.save = function() {
if ($scope.testForm.$invalid) {
setTouched($scope.testForm);
}
}
}]);
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angularjs#1.3.6" data-semver="1.3.6" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.6/angular.min.js"></script>
<script data-require="ng-messages#*" data-semver="1.3.16" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-messages.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="DemoController">
<form name="testForm" ng-submit="save()" novalidate>
<div ng-repeat="item in config">
<input type="text" name="{{item.name}}" ng-model="item.value"
ng-required="item.required" />
<div ng-messages="testForm[item.name].$error"
ng-if="testForm[item.name].$invalid && testForm[item.name].$touched">
<div ng-message="required">this is required</div>
</div>
</div>
<button type="submit">save</button>
</form>
</body>
</html>
Hope this can help :)
Q] I'm basic Developer , How to display text from textarea on submit button using angular-js ?
I have current code with me :-
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
myApp = angular.module('myApp', []);
function Ctrl($scope) {
$scope.list = [];
$scope.pass = $scope.list;
$scope.text = 'Share your knowledge !';
$scope.submit = function() {
if ($scope.text) {
$scope.pass.push($scope.text);
}
};
}
</script>
</head>
<body>
<div ng-app>
<div ng-controller="Ctrl">
<form ng-submit="submit()">
<br>
<textarea style="resize:initial;" type="" ng-model="text" name="text"></textarea>
<br>
<input align="right" style="margin-top:20px;margin-left:120px; align:right;" type="submit" id="submit" value="Submit" />
<pre>{{list}}</pre>
</form>
</div>
</div>
</body>
</html>
The above code just display's messages from textarea in an array format.
But i just want a single text message to be printed/displayed . How can that be achieved ? Thank you .
I guess you only want to display the current message which is in textarea. If so do this:
function Ctrl($scope) {
$scope.pass = [];
$scope.text = 'Share your knowledge !';
$scope.submit = function() {
if ($scope.text) {
$scope.pass.push($scope.text);
$scope.list = $scope.text;
}
};
}
You can user text as value of the textarea.
When from is submitted set the value of textarea.
I guess you want the message in textarea to show in list after form submit.
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
myApp = angular.module('myApp', []);
function Ctrl($scope) {
$scope.list = '';
// ^^^^^^^^^^^^^
$scope.pass = $scope.list;
$scope.text = 'Share your knowledge !';
$scope.submit = function() {
$scope.list = $scope.text;
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
};
}
</script>
</head>
<body>
<div>
<div ng-controller="Ctrl">
<form ng-submit="submit()">
<br>
<textarea style="resize:initial;" type="" ng-model="text" name="text"></textarea>
<br>
<input align="right" style="margin-top:20px;margin-left:120px; align:right;" type="submit" id="submit" value="Submit" />
<pre>{{list}}</pre>
</form>
</div>
</div>
</body>
</html>
I am trying to create a multiplication function in an angularjs controller. I want the function to return the product of quantity and price. I'm using the snippet below, but it's returning an error. What am I doing wrong?
<!DOCTYPE html> <html>
<head> <script src= "Angular.js"></script> </head>
<body>
<div ng-app="" ng-controller="personController">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price">
<p><b>Total in dollar:</b> {{fullname()}}</p>
</div>
<script> function personController(scope) { var input1 = scope.quantity , var input2 = scope.price ,
$scope.fullName = function() {
return {{input1 * input2}};
} } </script>
</body> </html>
In this simple example you do not need to create a controller.
See here
<h2>Cost Calculator</h2>
Quantity:
<input type="number" ng-model="quantity">Price:
<input type="number" ng-model="price">
<p><b>Total in dollar:</b> {{quantity*price}}</p>
</div>
But, if you need create it - see mistakes:
angulars interpolation syntax {{ }} is only used in HTML, not javascript.
Use $scope, not scope
formatting your code is important.
Here is an example using the currency filter. You might also want to take a look at the number filter.
Note: Starting in angular 1.3.0 the currency filter lets you add a fractionSize.
angular.module('myApp',[])
.controller('personController', ['$scope', function($scope) {
$scope.price = 0;
$scope.quantity = 0;
$scope.total = function() {
return $scope.price * $scope.quantity;
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="personController">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">
<p><b>Total in dollars:</b> {{ total() | currency : $ }}</p>
</div>
<script> function personController(scope) {
var input1 = scope.quantity;,
var input2 = scope.price;
$scope.fullName = function() {
return {{input1 * input2}};
}
}
</script>
</body> </html>
There is a clear syntax error here which is {{input * input2}}. This is angularjs expression syntax, not javascript syntax. Try just using input * input2. You are also referring to $scope which is not available, so change to 'scope':
scope.fullName = function() {
return input1 * input2;
}
Or, you could refer to the scope variables directly
scope.fullName = function() {
return scope.quantity * scope.price;
}
Or you could refer to them directly in the template:
<!DOCTYPE html> <html>
<head> <script src= "Angular.js"></script> </head>
<body>
<div ng-app="">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price">
<p><b>Total in dollar:</b> {{quantity * price}}</p>
</div>
</body> </html>
you are not using $scope? thats not local variable that is injected $scope so name cannot be changes as we do with the argument names of loval variables
There were syntax errors as well i have refactored your code
Working demo
angular.module('test',[]).controller('personController', function ($scope) {
$scope.price = 0;
$scope.quantity=0
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html> <html>
<head> <script src= "Angular.js"></script> </head>
<body>
<div ng-app="test" ng-controller="personController">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price">
<p><b>Total in dollar:</b> {{quantity*price}}</p>
</div>
</body> </html>
I am trying to create a attribute directive that will insert a label before the input field. Judging by the alert statement, the html looks correct. However I am not compiling or doing the angular element correctly. Any help would would be much appreciated.
The fiddle is http://jsfiddle.net/2suL9/
This is the JS code.
var myApp = angular.module('myApp', []);
myApp.directive('makeLabel', function ($compile) {
return {
restrict: 'A',
replace: false,
link: function (scope, inputFld, attrs) {
var ForInput = attrs['name'];
var LabelSize = attrs['labelSize'];
var LabelText = attrs['makeLabel'];
var htmlStart = '<label for="' + ForInput + '" class="label-control ' + LabelSize + '">';
var htmlStar = '';
if (attrs['required'] ) {
htmlStar = '<span style="color:red">*</span>';
}
var htmlEnd = LabelText + ":</label> ";
var htmlTotal = htmlStart + htmlStar + htmlEnd;
alert(htmlTotal);
// Now add it before the input
var newLabel = angular.element(htmlTotal);
inputFld.prepend(($compile(htmlTotal)));
}
};
});
This is the HTML
<!DOCTYPE html>
<html class="no-js" data-ng-app="myApp">
<head>
<title></title>
</head>
<body>
<div class="container">
<div class="row">
<form name="TestLabelForm" class="form-horizontal">
<div class="form-group">
<input type="text" name="Simple" required="" make-label="Test Label" label-size="col-md-7" />
</div>
</form>
</div>
<br />
Should look like
<br />
<div class="row">
<form name="ExampleForm" class="form-horizontal">
<div class="form-group">
<label for="Simple2" class="col-md-7"><span style="color:red">*</span>Test Label:</label>
<input type="text" name="Simple2" required="" />
</div>
</form>
</div>
</div>
<!-- Get Javascript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"> </script>
<script src="js/TestLabelAttr.js"> </script>
</body>
</html>
Did you see the DOM Exception, which was thrown? It could not find the elements, which you created. You have to use document.createElement() and introduce the newly created element to the scope via $compile(scope)(newElement). Here is a working fiddle of this: http://jsfiddle.net/2suL9/26/ Please note that I didn't implement the if condition of your example, you have to add it!
The javascript part looks like this:
var myApp = angular.module('myApp', []);
myApp.directive('makeLabel', function ($compile) {
return function (scope, inputFld, attrs) {
var el = inputFld[0];
var newEl = document.createElement("label");
newEl.setAttribute("for", attrs['name']);
newEl.setAttribute("class", "label-control");
var subEl = document.createElement("span");
subEl.setAttribute("style", "color:red");
subEl.innerHTML = "*";
var endText = document.createTextNode("Test Label:");
$compile(scope)(newEl);
$compile(scope)(subEl);
$compile(scope)(endText);
newEl.appendChild(subEl);
newEl.appendChild(endText);
inputFld.parent().prepend(newEl);
}
});
Note: Changing the dom elements outside of the directive is not a good practice. Rather use another directive for the label, which should be shown in front of the input. You can centralise the logic in your controller and use broadcast to inform the directives, when they should change.