I have a problem with SELECT options, when I do my first choice the content of my SELECT becomes empty.
here are my app.html && app.js
app.html
<html>
<head>
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/nodeCss.css">
</head>
<body ng-app="Webapp">
<h1>Module Opale</h1>
Titre<input type="text" placeholder="Titre"><br />
Metadonnées<input type="text" placeholder="Titre"><br />
Objectif du module<input type="text" placeholder="Objectif">
<script type="text/ng-template" id="tree_item_Opale.html">
<button class="addchild" ng-click="addChild(data)">addChild</button>
<button ng-show="data.parent" ng-click="addSibling(data)">addSibling</button>
<button class="delete" ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete children</button>
<div>
<select ng-model="choices" ng-options="choice as choice.name for choice in choices"></select>{{choices}}
<div ng-switch on="choices.id">
<div ng-switch-when="1"><h3>Division</h3>
Titre division<input type="text" /><br />
Titre court<input type="text" /><br />
</div>
<div ng-switch-when="2"><h4>Grain de contenu</h4>
Titre<input type="text" /><br />
Titre court<input type="text" /><br />
<h5>Information</h5>
Titre<input type="text" /><br />
<textarea rows="4" cols="70"></textarea>
</div>
</div>
</div>
<ul>
<li ng-repeat="data in data.nodes" ng-include="'tree_item_Opale.html'"></li>
</ul>
</script>
<ul ng-controller="treeCtrl">
<li ng-repeat="data in tree" ng-include="'tree_item_Opale.html'"></li>
</ul>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/rightClickDirective.js"></script>
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/plugins/bootstrap/bootstrap.min.js"></script>
</body>
</html>
app.js
angular.module("Webapp", ["ngSanitize","directive.contextMenu"])
.controller("treeCtrl", ['$scope', function($scope) {
$scope.choices=[
{id:'1',name:'Division'},
{id:'2',name:'Grain de contenu'},
$scope.delete = function(data) {
data.nodes = [];
};
$scope.addSibling = function(data) {
var post = data.parent.nodes.length + 1;
var newName = data.parent.name + '-' + post;
data.parent.nodes.push({name: newName,nodes: [], parent: data.parent});
};
$scope.addChild = function(data) {
var post = data.nodes.length + 1;
var newName = data.name + '-' + post;
data.nodes.push({name: newName,nodes: [], parent: data});
};
$scope.tree = [{name: "Node", nodes: []}];
}]);
nodeCss.css
ul {
list-style: none;
border-left: 1px dashed #ddd;
}
li {
margin-left: 20px;
}
button {
background: #63AE12;
color: #FFF;
border: 0;
font-size: 0.8em;
margin: 9px;
}
button.addchild {
background: #3094E7;
}
button.delete {
background: orange;
}
when I add child or sibling and I want to select an option, the first add the options are available but when i add second time the options disappear
This happens because you use choices, which is your array, as your ng-model. You need a different variable for ng-model. So what happens is that when you select, your choice becomes the only available option since it's your new array (it's binded because of the ng-model).
Do something like this:
<select ng-model="modelChoices" ng-options="choice as choice.name for choice in choices"></select>{{modelChoices}}
Related
This is very Basic issue of angular but I am unable to fix this; I want to validate email address using ng-pattern but it failed on some condition
see the working Demo
failed condition : when i write some#thing it validated OK but that is not correct. Kindly help me to solve this veri basic issue.
(function() {
var app = angular.module('app', []);
app.controller ('MainCtrl', function ($scope){
var vm = this;
vm.title = "Email Validation";
vm.email = "";
vm.email_regex = '^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$';
});
})();
<html ng-app="app">
<head>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="angular.js#*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
</head>
<body ng-controller="MainCtrl as vm">
<h2>{{vm.title}}</h2>
<div class="col-md-12">
<form name="emailForm" novalidate="">
<div class="form-group" ng-class="{'has-error': emailForm.username.$touched && emailForm.username.$invalid }">
<label>Email</label>
<input type="email" class="col-md-12 form-control" name="username" ng-model="vm.email" ng-pattern="vm.email_regex" required />
</div>
<div ng-if="emailForm.username.$touched && emailForm.username.$invalid" ng-messages="emailForm.username.$error" class="text-danger">
<span ng-message="pattern">Invalid Username.</span>
<span ng-message="required">Please enter Username.</span>
</div>
</form>
</div>
<div class="row"></div>
<hr />
<pre>{{ emailform.username.$error | json }}</pre>
</body>
</html>
You need to remove ' '
from vm.email_regex
DEMO: http://plnkr.co/edit/tbLP5syvZEq7qtE4X75o?p=preview
Refer this: Why is Angularjs ng-pattern not working with the following regexp?
(function() {
var app = angular.module('app', []);
app.controller ('MainCtrl', function ($scope){
var vm = this;
vm.title = "Email Validation";
vm.email = "";
vm.email_regex = /^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
});
})();
I've got
<div class="navbar-collapse">
<div class="row">
<div class="col-lg-2 img-fake"></div>
<div class="col-lg-10 native-item ">
<textarea class="form-control" rows="5" id="comment" ng-model="newComment" ng-keyup="$event.keyCode == 13 && comment(existingItem,newComment)"></textarea>
</div>
</div>
</div>
and in the comment function i've got
$scope.comment = function(existingItem,newComment){
existingItem.comments.push(newComment);
$scope.newComment = '';
} // just adding text from textarea to the list
so i'm wondering why the value of textarea does not go to empty value
http://plnkr.co/edit/kmBA3Cco8QNDL8i4eOjz its working.
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="navbar-collapse">
<div class="row">
<div class="col-lg-2 img-fake"></div>
<div class="col-lg-10 native-item ">
{{newComment}}
<textarea class="form-control" rows="5" id="comment" ng-model="newComment" ng-keyup="$event.keyCode == 13 && comment(existingItem, newComment)"></textarea>
</div>
</div>
</div>
</body>
</html>
In youe case it is not working because, you may not define comment property of existingItem
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.newComment = 'asdf';
$scope.existingItem = {};
$scope.existingItem.comments = [];
$scope.comment = function(existingItem, newComment){
existingItem.comments.push(newComment);
console.log(existingItem.comments);
$scope.newComment = '';
}
});
i had same issue and fixed like this
$scope.comment = function(existingItem,newComment){
existingItem.comments.push(newComment);
$scope.newComment = 'xx'; // add a random data
$scope.$evalAsync(function() { $scope.newComment = '' ; }); //or use $timeout(function() { $scope.newComment = '' ; });
}
Basically im Creating A Markdown Previewer In Reactjs As Of Now Im Getting Error like Uncaught TypeError: value.replace is not a function and Had No Idea What Causing It Any Help Here if I Remove this.format from here dangerouslySetInnerHTML={this.format((this.rawMarkup()))} /> works fine but while typing on input box if i press enter it is not taking me to next line
var App =React.createClass({
getInitialState:function(){
return{
value:"My Value"
}
},
updateValue:function(modifiedValue){
this.setState({
value:modifiedValue
})
},
format: function (value) {
return { __html: value.replace(/\r?\n/g, '<br>') };
},
rawMarkup: function() {
var rawMarkup = marked(this.state.value.toString(), {sanitize: true});
return { __html: rawMarkup };
},
render:function(){
return(
<div className="inputBox container-fluid">
<h1 className="text-center text-primary">Hello Coders !!!</h1>
<div className="row">
<div className="col-md-6 col-md-offset-1">
<InputBox value={this.state.value} updateValue={this.updateValue}/>
</div>
<div
className="outputBox col-md-6 col-md-offset-1"
dangerouslySetInnerHTML={this.format((this.rawMarkup()))} />
</div>
</div>
);
}
});
var InputBox =React.createClass({
update: function() {
var modifiedValue = this.refs.initialValue.value;
this.props.updateValue(modifiedValue);
},
render:function(){
return(
<textarea type="text" value={this.props.value} onChange={this.update} ref="initialValue">
</textarea>
);
}
});
ReactDOM.render(<App />,
document.querySelector("#app")
);
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>React Tutorial</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.outputBox,textarea{
width: 400px;
border: 5px solid gray;
margin: 0;
height: 500px;
}
</style>
</head>
<div id="app"></div>
<script src="demo.js" type="text/babel"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</body>
</html>
As you are using markdown you don't need replace \n to <br>, you can just set breaks option to true
rawMarkup: function() {
return { __html: marked(this.state.value, { sanitize: true, breaks: true }) };
},
Example
I have written a simple code which gets a list items from a php file using the get method. They are displayed successfully, but however, when injecting the ngAnimate module it seems that its not working properly:
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.min.js"></script>
<style type="text/css">
.slide.ng-enter.ng-enter-active,
.slide.ng-leave {
opacity: 1;
height: 80px;
overflow: hidden;
}
.slide.ng-leave.ng-leave-active,
.slide.ng-leave {
opacity: 0;
height: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<input type='text' ng-model='search' placeholder="Search Here">
<ul>
<li ng-animate="animate" class="slide" ng-repeat="x in names | filter: search">
{{ (x.Name | uppercase) + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function (response) {$scope.names = response.records;});
});
</script>
</body>
</html>
I was able to solve the issue;
it was a CSS typo error which I was able to debug:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.angularjs.org/1.2.6/angular.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular-animate.js"></script>
<style type="text/css">
.ng-enter {
transition:0.75s;
opacity:0;
}
.ng-enter-stagger{
transition-delay:0.3s;
}
.ng-enter-active {
opacity:1;
}
.ng-leave-stagger{
transition-delay:0.3s;
}
.ng-leave {
transition:0.75s;
opacity:1;
}
.ng-leave-active {
opacity:0;
}
</style>
<div ng-app="myApp" ng-controller="customersCtrl">
<input type='text' ng-model='search' placeholder="Search Here">
<ul>
<li ng-animate="'animate'" class="slide" ng-repeat="x in names | filter: search">
{{ (x.Name | uppercase) + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function(response) {
$scope.names = response.records;
});
});
</script>
</body>
</html>
I am using the ngModal modal dialog box directive for my angular application. It's displaying some weird behavior that I don't quite understand. When I attach variables directly to the controller's $scope and reference them in the dialog box, the binding breaks. Changing their values in the dialog has no effect on the variables in the controller. But if I add the variables as properties to an object and then add the object to the $scope it works. In other words, if I do this
$scope.v1 = 1
$scope.v2 = 'abc'
it doesn't work, but if I do
$scope.myData = {
v1: 1,
v2: 'abc'
}
things work fine. What's the deal? You can see a working version of the code here and a broken version here.
If the plunk apps aren't loading for you, here is the code:
html
<!DOCTYPE html>
<html data-ng-app='ngModalDemo'>
<head>
<title>ngQuickDate Demo</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ng-modal.css" media="all" />
<style type='text/css'>
body{font-family:'Helvetica Neue',Helvetica,sans-serif}
h1 { padding: 0; margin: 0; }
.ng-cloak { display: none; }
</style>
</head>
<body>
<div ng-controller='DemoController'>
<modal-dialog show='myData.modalShown' width='500px' dialog-title='Modal Dialog Title' on-close='logClose()'>
<p>This is some html content</p>
<p>
<label for='hello'>Hello:</label>
<input type='text' name='hello' ng-model='myData.hello' />
</p>
<p>
<label for='foo'>Foo:</label>
<input type='text' name='foo' ng-model='myData.foo' />
</p>
<img src='http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg' width='300px'/>
</modal-dialog>
<button ng-click='toggleModal()'>Toggle Modal</button>
<br/>
<br/>
<br/>
<p><strong>Shown?</strong> {{myData.modalShown}}</p>
<p><strong>Hello</strong>: {{myData.hello}}</p>
<p><strong>Foo</strong>: {{myData.foo}}</p>
</div>
<script type="text/javascript" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script type="text/javascript" src="ng-modal.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controller.js"></script>
</body>
</html>
angular app
app.config(function(ngModalDefaultsProvider) {
return ngModalDefaultsProvider.set({
closeButtonHtml: "<i class='fa fa-times'></i>"
});
});
angular controller
app = angular.module('ngModalDemo')
app.controller('DemoController', function($scope) {
$scope.myData = {
link: "http://google.com",
modalShown: false,
hello: 'world',
foo: 'bar'
}
$scope.logClose = function() {
console.log('close!');
};
$scope.toggleModal = function() {
$scope.myData.modalShown = !$scope.myData.modalShown;
};
});