What to send input text data to div - angularjs

html Code
<div style="position: absolute; bottom: 0px; width: 100%">
<div style="text-align: center">
<div>
{{great}}
</div>
<form>
<div class="list">
<div class="list list-inset">
<label class="item item-input">
<input type="text" class="form-control input-lg" height="20" placeholder="Add Note" ng-model="searchText">
</label>
<button class="button button-block" ng-click="addTag()">Add Note</button>
</div>
</div>
</form>
app.js
$scope.searchText =" ";
$scope.great = "Note Here";
$scope.addTag = function () {
$scope.great == $scope.searchText;
};
I am trying to add a note to my tasks that I create. Here is my app:
https://behrouz2000.fwd.wf
When you click on the task and click a note it should create that note one on top of each other with a minute time stamp.


When you are assigning you should use one equal
$scope.great = $scope.searchText;
DEMO
var app = angular.module("myApp", []);
app.controller("myCtrl", ['$scope', function($scope) {
$scope.searchText ="Note Here";
$scope.great = [];
$scope.addTag = function () {
$scope.great = $scope.searchText;
};
}]);
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<script src="https://code.angularjs.org/1.4.7/angular.js"></script>
</head>
<body ng-controller="myCtrl">
<div style="position: absolute; bottom: 0px; width: 100%">
<div style="text-align: center">
<div>
{{great}}
</div>
<div class="list">
<div class="list list-inset">
<label class="item item-input">
<input type="text" class="form-control input-lg" height="20" placeholder="Add Note" ng-model="searchText">
</label>
<button class="button button-block" ng-click="addTag()">Add Note</button>
</div>
</div>
</div>
</div>
</body>
</html>

Related

Fetching user data using ng-click

Here is the list of users. I need to display particular user details when clicked on him.
<head>
<script>
(function() {
angular.module("testApp", ['ui.bootstrap']).controller('testCtrl', ['$scope', '$http', function($scope, $http) {
$scope.userData = undefined;
$http.get('https://randomuser.me/api/?results=30&nat=US').then(function(response) {
$scope.userData = response.data;
});
}]);
}());
</script>
<style></style>
</head>
<body ng-app="testApp">
<div ng-controller="testCtrl">
<h1> PERSONS</h1>
<form name="commonForm">
<div class="col-sm-4" ng-repeat="user in userData.results" ng-class="{active : isSelected(user)} style="margin-top:50px;">
<img class="col-sm-4" ng-src="{{user.picture.large}}"/>
<div class="col-sm-8">
<div ><a ng-click="clickMe(p)" class="clickable"><b>{{user.name.first}} {{user.name.last}}</b></a></div>
<div>{{user.email}}</div>
<div>{{user.location.street}},{{user.location.city}},{{user.location.state}},{{user.location.postcode}}</div>
</div>
</div>
</form>
</div>
</body>
Also check the following link for the demo - https://plnkr.co/edit/J70FKDpdXUtg1AfiVkcz?p=preview
I need to display a particular user's data when we click on the user.

Below is the working example for the same
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<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="angular.js#1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
<script>
(function() {
angular.module("testApp", ['ui.bootstrap']).controller('testCtrl', ['$scope', '$http', function($scope, $http) {
$scope.userData = undefined;
$scope.selectedUser = undefined;
$http.get('https://randomuser.me/api/?results=30&nat=US').then(function(response) {
$scope.userData = response.data;
});
$scope.selectUser = function(usr){
$scope.selectedUser=usr;
};
}]);
}());
</script>
<style>
.userInfo{
border: 1px solid #ccc;
margin-top:10px;
padding:5px;
cursor: pointer;
}
.userInfo:hover{
background: #ccc;
}
.profile{
padding-left: 0px;
padding-right: 0px;
}
.ellipsis{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body ng-app="testApp">
<div ng-controller="testCtrl">
<form name="commonForm">
<div ng-hide="selectedUser">
<div class="col-sm-4 userInfo" ng-repeat="user in userData.results" ng-click="selectUser(user)" >
<img class="col-sm-4 profile" ng-src="{{user.picture.medium}}"/>
<div class="col-sm-8">
<div class="ellipsis"><b>{{user.name.first}} {{user.name.last}}</b></div>
<div class="ellipsis">{{user.email}}</div>
</div>
</div>
</div>
<div ng-show="selectedUser">
<button ng-click="selectedUser = undefined">Go Back</button>
<br />
<br />
<img class="col-sm-4 profile" ng-src="{{selectedUser.picture.large}}"/>
<div class="col-sm-4">
<div class="form-group">
<label for="first">First Name:</label>
<input type="text" class="form-control" id="first" ng-model="selectedUser.name.first">
</div>
<div class="form-group">
<label for="last">Last Name:</label>
<input type="text" class="form-control" id="last" ng-model="selectedUser.name.last">
</div>
<div class="form-group">
<label for="username">Login:</label>
<input type="text" class="form-control" id="username" ng-model="selectedUser.login.username" disabled>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="text" class="form-control" id="email" ng-model="selectedUser.email">
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="text" class="form-control" id="dob" ng-model="selectedUser.dob">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="nat">Nationality:</label>
<input type="text" class="form-control" id="nat" ng-model="selectedUser.nat">
</div>
</div>
</div>
</form>
</div>
</body>
</html>

Angular JS Form Values reset when toggling between two elements

While switching back and forth with the radio buttons, the form values get reset. Why does $scope.user reset and does not stay persistent?
var app = angular.module("myApp", ["ui.bootstrap"]);
app.controller(
"myCtrl",
function($scope) {
$scope.radio_test = "0";
$scope.user = "John Doe";
}
);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body>
<div ng-app="myApp" ng-controller="myCtrl" class="container">
<div class="panel panel-default">
<div class="panel-body">
<div>
<form>
Choose:
<label class="radio-inline"><input type="radio" ng-model="radio_test" value="0">First</label>
<label class="radio-inline"><input type="radio" ng-model="radio_test" value="1">Second</label>
</form>
<br />
<div ng-switch="radio_test">
<div ng-switch-when="0">
<div>
<form ng-app="myApp" name="myForm" class="form-horizontal" novalidate>
<div class="form-group">
<label class="control-label col-sm-2" for="user">Username:</label>
<div class="col-sm-10">
<input type="text" name="user" ng-model="user" class="form-control" required />
<div style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<div ng-show="myForm.user.$error.required">Username is required.</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div ng-switch-when="1">
<div>Something Else</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>

Use the controller as syntax (Run the below snippet in order to see how it fixes the issue).
In your code you would need to change:
1- This
$scope.radio_test="0";
$scope.user="John Doe";
to
var vm = this;
vm.radio_test = "0";
vm.user = "John Doe";
2- This: ng-controller="myCtrl" to ng-controller="myCtrl as vm"
3- And every where you were accessing anyVar in the view (and in controller $scope.anyVar) to vm.anyVar (in the view and the controller).
var app = angular.module("myApp", ["ui.bootstrap"]);
app.controller(
"myCtrl",
function($scope) { // there is no need to use the $scope any more
var vm = this;
vm.radio_test = "0";
vm.user = "John Doe";
}
);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="myApp" ng-controller="myCtrl as vm" class="container">
<div class="panel panel-default">
<div class="panel-body">
<div>
<form>
Choose:
<label class="radio-inline"><input type="radio" ng-model="vm.radio_test" value="0">First</label>
<label class="radio-inline"><input type="radio" ng-model="vm.radio_test" value="1">Second</label>
</form>
<br />
<div ng-switch="vm.radio_test">
<div ng-switch-when="0">
<div>
<form ng-app="myApp" name="myForm" class="form-horizontal" novalidate>
<div class="form-group">
<label class="control-label col-sm-2" for="user">Username:</label>
<div class="col-sm-10">
<input type="text" name="user" ng-model="vm.user" class="form-control" required />
<div style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<div ng-show="myForm.user.$error.required">Username is required.</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div ng-switch-when="1">
<div>Something Else</div>
</div>
</div>
</div>
</div>
</div>
</div>

Setting your ng-model on the input to $parent.user seems to do the trick.
var app = angular.module("myApp", ["ui.bootstrap"]);
app.controller(
"myCtrl",
function($scope) {
$scope.radio_test = "0";
$scope.user = "John Doe";
}
);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body>
<div ng-app="myApp" ng-controller="myCtrl" class="container">
<div class="panel panel-default">
<div class="panel-body">
<div>
<form>
Choose:
<label class="radio-inline"><input type="radio" ng-model="radio_test" value="0">First</label>
<label class="radio-inline"><input type="radio" ng-model="radio_test" value="1">Second</label>
</form>
<br />
<div ng-switch="radio_test">
<div ng-switch-when="0">
<div>
<form ng-app="myApp" name="myForm" class="form-horizontal" novalidate>
<div class="form-group">
<label class="control-label col-sm-2" for="user">Username:</label>
<div class="col-sm-10">
<input type="text" name="user" ng-model="$parent.user" class="form-control" required />
<div style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<div ng-show="myForm.user.$error.required">Username is required.</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div ng-switch-when="1">
<div>Something Else</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>

AngularJS Validations for multiple fields

I need one example for validations on dynamic added fields. Here is my page.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<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.4/jquery.min.js">
</script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js">
</script>
<title>Add Remove in AngularJS</title>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.deleted = [];
$scope.inputs = [];
$scope.addRow = function(){
$scope.inputs.push({name:'', age:''});
};
$scope.removeRow = function(index, input){
// alert(index);
// alert(input);
$scope.deleted.push(input);
$scope.inputs.splice(index,1);
};
});
</script>
</head>
<body style="background-color: gray; margin-top: 10px; ">
<center>
<div class="row" ng-app="myApp" ng-controller="myCtrl">
<div class="col-md-6">
<div class="panel panel-flat">
<div class="panel-header">
<h4>
Person Address
<button ng-click="addRow()">Add</button>
</h4>
</div>
<div class="panel-body">
<form name="form" class="form-horizontal">
<div ng-repeat="input in inputs">
<div class="form-group" ng-class="{'has-error' : form.name.$invalid}">
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="input.name" name="name[$index]" ng-maxlength="45" ng-minlength="3"
class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
<span class="help-block" ng-show="form.name[$index].$error.pattern">Alphabet only</span>
<span class="help-block" ng-show="form.name[$index].$error.minlength">Too Short</span>
<span class="help-block" ng-show="form.name[$index].$error.maxlength">Too Long</span>
<span class="help-block" ng-show="form.name[$index].$error.required">required</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age</label>
<div class="col-md-10">
<input type="text" ng-model="input.age" name="age"
class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
<span ng-show="form.age.$invalid && form.age.$error.pattern">Number
length should be 3</span>
</div>
</div>
<button ng-click="removeRow($index, input)">Remove</button>
<hr>
</div>
</form>
</div>
</div>
</div>
<!-- inputs :{{inputs}}<br>deleted : {{deleted}} -->
</div>
</center>
</body>
</html>

You can add a fonction to you controller :
app.controller('myCtrl', function($scope) {
//...
$scope.validationFn = function () {
//do you validation here
};
then you just need to modify
<form name="form" class="form-horizontal" ng-submit="validationFn()">

Here is the answer:
<div class="panel-body"><form name="form" class="form-horizontal">
<div ng-repeat="input in inputs"><ng-form name="sfIn"><div class="form-group" >
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="input.name" name="name" ng-maxlength="45" ng-minlength="3"
class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
<span
class="help-block" ng-show="sfIn.name.$error.pattern">Alphabet only</span>
<span
class="help-block" ng-show="sfIn.name.$error.minlength">Too Short</span>
<span
class="help-block" ng-show="sfIn.name.$error.maxlength">Too Long</span>
<span
class="help-block" ng-show="sfIn.name.$touched.required || sfIn.name.$error.required ||
sfIn.name.$dirty.required">required</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age</label>
<div class="col-md-10">
<input type="text" ng-model="input.age" name="age"
class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
<span
ng-show="sfIn.age.$error.pattern">Number
length should be 3</span>
</div>
</div>
<button
ng-click="removeRow($index, input)">Remove</button>
</ng-form>
<hr>
</div>
</form>
</div>

Page scrolling up when using Bootstrap and AngularJS

I am writing a HTML page using Bootstrap and AngularJS to capture details of an order, and when the page has finished loading it jumps up so that the header of the panel is hidden under the bootstrap navbar.
This isn't what I was expecting. See this plunkr for an example of what I want to achieve. It shows the panel header and the focus is on the Order Ref field as expected and the page doesn't move up at all.
I have tried to create a plunkr that uses AngularJS to demonstrate the issue, but I couldn't get it to run properly so I decided to show the same plunked code in the hope that someone has come across this before.
<!-- Orders.html -->
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="site.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<title>Portal</title>
</head>
<body>
<header class="bs">
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" rel="home" href="#">Portal</a>
</div>
<div class="collapse navbar-collapse">
<div class="nav navbar-nav navbar-right">
<div class="navbar-text">Search</div>
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</nav>
</header>
<div class="container">
<form name="form" class="form-horizontal" confirm-on-exit>
<div class="panel panel-primary">
<div class="panel-heading">
Create New Order
</div>
<div class="panel-body">
<div class="form-group">
<label for="inputOrderRef3" class="col-sm-2 control-label">Order Ref</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputOrderRef3" placeholder="Order Ref" ng-model="order.orderRef" maxlength="6" required autofocus>
</div>
</div>
<div class="form-group">
<label for="inputOrderDate3" class="col-sm-2 control-label">Order Date</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="inputOrderDate3" ng-model="order.orderDate" required>
</div>
</div>
<div class="form-group">
<label for="inputCustomer3" class="col-sm-2 control-label">Customer</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputCustomer3" placeholder="Customer" ng-model="order.customerName" maxlength="50" required>
</div>
</div>
<div class="form-group">
<label for="inputOrderedBy3" class="col-sm-2 control-label">Ordered By</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputOrderedBy3" placeholder="Ordered By" ng-model="order.orderedBy" maxlength="3" required>
</div>
</div>
<div class="form-group">
<label for="inputInstallationDate3" class="col-sm-2 control-label">Installation Date</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="inputInstallationDate3" ng-model="order.installationDate" required>
</div>
</div>
<div class="form-group">
<label for="inputAddress3" class="col-sm-2 control-label">Address</label>
<div class="col-sm-10">
<textarea id="inputAddress3" class="form-control" rows="4" ng-model="order.address" maxlength="250" required></textarea>
</div>
</div>
<div class="form-group">
<label for="inputTown3" class="col-sm-2 control-label">Town</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputTown3" placeholder="Town" ng-model="order.town" maxlength="30" required>
</div>
</div>
<div class="form-group">
<label for="inputPostcode3" class="col-sm-2 control-label">Postcode</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPostcode3" placeholder="Postcode" ng-model="order.postcode" maxlength="15" required>
</div>
</div>
<div class="form-group">
<label for="inputOrderNumber3" class="col-sm-2 control-label">Order Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputOrderNumber3" placeholder="Order Number" ng-model="order.orderNumber" required>
</div>
</div>
<div class="form-group">
<label for="inputValue3" class="col-sm-2 control-label">Value</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="inputValue3" ng-model="order.value" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-click="saveOrder()">Save Order</button>
<button type="button" class="btn btn-default" ng-click="cancelOrder()">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom text-center" role="navigation">
<div class="container">
<p class="text-muted">© 2015 Copyrights</p>
<p class="text-muted small">Built using Twitter Bootstrap v3.3.2</p>
</div>
</nav>
</body>
</html>
/* site.css */
body {
padding-top: 70px;
padding-bottom: 50px;
}
.huge {
font-size: 40px;
}
.panel-green {
border-color: #5cb85c;
}
.panel-green .panel-heading {
border-color: #5cb85c;
color: white;
background-color: #5cb85c;
}
.panel-green a {
color: #5cb85c;
}
.panel-green a:hover {
color: #3d8b3d;
}
.panel-red {
border-color: #d9534f;
}
.panel-red .panel-heading {
border-color: #d9534f;
color: white;
background-color: #d9534f;
}
.panel-red a {
color: #d9534f;
}
.panel-red a:hover {
color: #b52b27;
}
.panel-yellow {
border-color: #f0ad4e;
}
.panel-yellow .panel-heading {
border-color: #f0ad4e;
color: white;
background-color: #f0ad4e;
}
.panel-yellow a {
color: #f0ad4e;
}
.panel-yellow a:hover {
color: #df8a13;
}
It's quite annoying when the page moves up and creates a poor user experience. As this issue doesn't occur when not using Angular I'm inclined to believe that Angular could be the problem, although I cannot see how.
EDIT
I've updated the plunkr so that it now uses AngularJS and the page doesn't move up. I am wondering if this is because I have the index.html page being rendered by ASP.NET MVC?
<!-- Index.html -->
#{
Layout = null;
}
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Orbit Works</title>
#Styles.Render( "~/Content/css/themes/bundle", "~/Content/css/app" )
</head>
<body ng-controller="indexController">
<ptl-header></ptl-header>
<div class="container">
<div ui-view></div>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom text-center" role="navigation">
<div class="container">
<p class="text-muted">© 2015 Michael John Clarke.</p>
<p class="text-muted small">Built using Twitter Bootstrap v3.3.2 and AngularJS v1.3.9</p>
</div>
</nav>
#Scripts.Render( "~/bundles/script/libraries" )
#Scripts.Render( "~/bundles/script/app" )
</body>
</html>

Adding autoscroll="untrue" to the ui-view directive stops the page from scrolling to the child ui-view as described here.
<div ui-view autoscroll="untrue"></div>

How to hide and show a div, based on model condition in angularjs?

I want to hide/show a div based on checkbox. Seems pretty simple. I store the value of checkbox in a model and use it in div ng-show. What am I doing wrong?
<div ng-app='visibleApp'>
<div ng-controller='myController'>
<input type="checkbox" name="hideBasicInfo" ng-model="hideBasicInfo">hide the basic information section
<div ng-show="{{!hideBasicInfo}}">
<label for="firstName">First Name:</label>
<input type="text" name="firstName" ng-model="firstName"/></br>
<label for="middleName">Middle Name:</label>
<input type="text" name="middleName" ng-model="middleName"/></br>
<label for="lastName">Last Name:</label>
<input type="text" name="lastName" ng-model="lastName"/>
</div>
<hr/>
<div>
<h4>Debug Information</h4>
hideBasicInfo: {{hideBasicInfo}}<br/>
!hideBasicInfo: {{!hideBasicInfo}}
</div>
</div>
</div>
JS file:
var visibleApp = angular.module('visibleApp',[]);
visibleApp.controller('myController', function($scope){
$scope.data = "my data";
$scope.hideBasicInfo = false;
});
Thank you.
See fiddle

almost there...
<div ng-hide="hideBasicInfo">
...
</div>
no template braces ( {{}} ) needed.

<div ng-show='One'>
<p>Section One</p>
</div>
<div ng-show='Two'>
<p>Section Two</p>
</div>
<div ng-show='Three'>
<p>Section Three</p>
</div>
<!-- Navigation -->
<nav>
<a href='#' ng-click='showOne'> Show Div One </a>
<a href='#' ng-click='showTwo'> Show Div Two </a>
<a href='#' ng-click='showThree'> Show Div Three </a>
</nav>

Execute this code:`enter code here`
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
</head>
<body ng-app>
<h3>1. Show</h3>
<label>Show the square: <input type="checkbox" ng-model="mustShow" /></label><br />
<div ng-show="mustShow" style="width: 50px; height: 50px; background-color: red;"></div><br />
<br />
<h3>2. Hide</h3>
<label>Hide the square: <input type="checkbox" ng-model="mustHide" /></label><br />
<div ng-hide="mustHide" style="width: 50px; height: 50px; background-color: green;"></div>
</body>
</html>

Resources