Forgive me if I don't explain this well. I'm having a hard time getting my mind around the real problem I'm having. I'm hoping that someone will be able to make sense of my ideas and probably correct my misunderstandings of MVC, the way Angular works, or the structure of my controllers and which components I have tied a controller to. Sorry for the long question, but I've included as many screenshots and as much code as I thought might be helpful in understanding my current predicament. I've been stuck on this for weeks.
I'm building the initial stages of an EHR (Electronic Health Record) application that doctors would use in the office when visiting with patients. Obviously I'm not done styling everything or putting in content to make it look good. I'm also not finished making all of the data dynamic - which is what I'm having a hard time with. The piece I'm working on allows the doctor to select a patient, view information from their past visits, start a visit, and fill in the information for all of their symptoms, diagnoses, and prescription information.
The left menu bar is a controller, the header is a controller, and the bottom part (patient summary) is a controller. I want it to function as you might expect - it loads the header initially and then swaps out the bottom 2/3 of the site (from summary to symptoms, diagnosis, and prescriptions). So, after clicking on Start Visit, it should load the piece below.
As you can see from the first screenshot, the URL is localhost:8080/#/patientSummary/1 where the 1 is the patient ID. Everything must be based off of that ID. So, when a doctor initially selects a patient, it should load that page and base the information in the header and the patient summary off of the ID (using a query to the DB that works just fine). Then in the transition to second screenshot, and all transitions within that page, the header should stay constant.
In each of my views, patientSummary, symptoms, diagnosis, and prescriptions-tests, at the top I have <ng-include src="'templates/header.html'"></ng-include> to get the header. I know this is not good practice. So obviously every time I change a page it re-renders the header. As stated above, I don't want to do it this way, but this is the only way that I could get it to work.
Any ideas on what I could do differently? It needs to work like I've described above, so that the header will stay constant on every page but also will be populated dynamically based off of the patient ID at the same time as the patient summary, but I can't figure out how. I've looked into Services/Cache to share the patient ID between the header and patient summary controllers, but that doesn't seem like the best way to do it, either (and every time I try it comes back as undefined even after I've injected it into the controller).
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Patient Summary</title>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/common.css"/>
</head>
<body>
<div id="content" ng-app="osmosisApp" ng-controller="MainCtrl">
<!-- Left Menu -->
<div id="left-menu-wrapper" ng-controller="MenuCtrl">
<div class="left-menu-button" ng-click="showLeftMenu = !showLeftMenu"></div>
<nav id="left-menu" class="left-menu" ng-class="{'open' : showLeftMenu}">
<h3>Patient List</h3>
<block class="patient-button" ng-repeat="patient in patients" ng-click="go('/patientSummary/' + patient.id)">
<img class="patient-button-image" ng-src="{{patient.picture}}"/>
<div id="patient-name-and-status" class="patient-name-and-status">
<h4 class="patient-button-name">{{patient.name}}</h4>
<p class="patient-button-status">{{patient.status}}</p>
</div>
</block>
</nav>
<div id="content-cover" ng-click="showLeftMenu = !showLeftMenu" ng-class="{'content-cover' : showLeftMenu, 'content-uncover' : !showLeftMenu}"></div>
</div>
<!-- /Left Menu -->
<!-- Content -->
<div id="content-frame" ng-view></div>
<!-- /Content -->
</div>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
header.html
<!-- Header -->
<div id="header-wrapper">
<div id="patient-summary-header" class="header-row" ng-controller="HeaderCtrl">
<div id="pic-and-info" class="column-1">
<img id="patient-picture" ng-src="{{patient.picture}}" />
<h2 id="patient-name">{{patient.name}}</h2>
<div id="patient-info">
<p>{{patient.age}}, {{patient.sex}}</p>
</div>
</div>
<div id="patient-vitals-graph" class="column-2">
<canvas id="vitals-graph"></canvas>
</div>
<div id="logo-div" class="column-3">
<img id="logo" ng-src="{{'http://placehold.it/400x150'}}" />
</div>
</div>
</div>
<!-- /Header -->
patientSummary.html (one of the views)
<ng-include src="'templates/header.html'"></ng-include>
<!-- Patient Summary -->
<!-- Nav Buttons -->
<div id="start-visit" class="start-visit-button" ng-click="go('/symptoms')">Start Visit</div>
<!-- /Nav Buttons -->
<div id="patient-summary" class="section group">
<div id="column1" class="column span-2-of-3 height-5-of-5">
<h2>Past Visits</h2>
<div id="past-visits-info" class="info-section height-5-of-5">
<div class="past-visits-display" ng-repeat="pastVisit in patientSummary.pastVisits">
<h5>Diagnosis</h5>
<p>{{pastVisit.diagnosis}}</p>
<h5>Symptoms</h5>
<ul>
<li ng-repeat="symptom in pastVisit.symptoms">{{symptom}}</li>
</ul>
<div class="past-visits-display-date">{{pastVisit.date}}</div>
</div>
</div>
</div>
<div id="column2" class="column span-1-of-3 height-5-of-5">
<h2>Current Conditions</h2>
<div class="info-section height-1-of-5">
<ul>
<li ng-repeat="condition in patientSummary.currentConditions">{{condition}}</li>
</ul>
</div>
<h2>Current Prescriptions</h2>
<div class="info-section height-2-of-5">
<ul>
<li ng-repeat="prescription in prescriptions | currentPrescriptions">{{prescription.name}}</li>
</ul>
</div>
<h2>Expired Prescriptions</h2>
<div class="info-section height-2-of-5">
<ul>
<li ng-repeat="prescription in prescriptions | expiredPrescriptions">{{prescription.name}}</li>
</ul>
</div>
<h2>Patient Questions</h2>
<div class="info-section height-1-of-5">
<ul>
<li ng-repeat="question in patientSummary.questions">{{question}}</li>
</ul>
</div>
</div>
</div>
<!-- /Patient Summary -->
Routes in controllers.js
var osmosisApp = angular.module('osmosisApp', ['ngRoute'], function($routeProvider, $httpProvider) {
$routeProvider
.when('/select-news', {
templateUrl:'templates/select-news.html'
})
.when('/select-news/end-visit', {
templateUrl:'templates/select-news.html',
controller:'EndVisitCtrl'
})
.when('/patientSummary/:id', {
templateUrl:'templates/patientSummary.html',
controller:'SummaryCtrl'
})
.when('/symptoms', {
templateUrl:'templates/symptoms.html',
controller:'SymptomsCtrl'
})
.when('/prescriptions-tests', {
templateUrl:'templates/prescriptions-tests.html',
controller:'PrescriptionsTestsCtrl'
})
.when('/diagnosis', {
templateUrl:'templates/diagnosis.html',
controller:'DiagnosisCtrl'
})
.otherwise({redirectTo:'/select-news'});
// Other magic to make POST stuff work
Controllers in controllers.js
// Main Controller
osmosisApp.controller('MainCtrl', ['$scope', '$location', function ($scope, $location) {
$scope.showHeader = false;
$scope.go = function(path) {
$location.path(path);
};
$scope.$on('$routeChangeSuccess', function() {
$.getScript("lib/chart/Chart.js", function() {
$.getScript("js/chart.js");
});
});
}]);
// Header Controller
osmosisApp.controller('HeaderCtrl', ['$scope', '$http', function ($scope, $http, cacheService) {
//sharedProperties.getId();
//cacheService.get('id');
// Needs to grab the ID from the SummaryCtrl
/*$http.post("/patient/getPatientInfo", {"patient_id" : 1})
.success(function(response) {
console.log("Server response: " + JSON.stringify(response));
});*/
$scope.patient = {
"id" : 1,
"name" : "Mike DeMille",
"age" : "23",
"sex" : "Male",
"picture" : "images/MikeDeMille.png"
};
}]);
// Patient Summary Controller
osmosisApp.controller('SummaryCtrl', ['$scope', '$routeParams', function ($scope, $routeParams, cacheService) {
//sharedProperties.setId($routeParams.id);
//cacheService.put('id', $routeParams.id);
$scope.patientSummary = {
"currentConditions" : ["Lung cancer", "Another awful, life-threatening condition"],
"pastVisits" : [{
"date" : "9/1/2013",
"symptoms" : ["Old age", "Mortality"],
"diagnosis" : "The patient is going to die... Again",
"prescriptions" : [{
"name" : "Prescription name",
"dose" : "Once daily",
"form" : "tablet",
"duration" : "30 days",
"refills" : "3",
"expiration" : "9/1/2014"
},{
"name" : "Prescription name 2",
"dose" : "Twice daily",
"form" : "capsule",
"duration" : "60 days",
"refills" : "3",
"expiration" : "9/1/2014"
}],
"tests" : [{
"name" : "Test name",
"results" : "Blah blah blah, results"
},{
"name" : "Test name 2",
"results" : "Blah blah blah, results 2"
}]
},{
"date" : "7/3/2011",
"symptoms" : ["Promiscuity", "Risk taking"],
"diagnosis" : "The patient is going to die",
"prescriptions" : [{
"name" : "Prescription name 3",
"dose" : "Once daily",
"form" : "tablet",
"duration" : "30 days",
"refills" : "3",
"expiration" : "7/3/2012"
},{
"name" : "Prescription name 4",
"dose" : "Twice daily",
"form" : "capsule",
"duration" : "10 days",
"refills" : "3",
"expiration" : "7/3/2012"
}],
"tests" : [{
"name" : "Test name 3",
"results" : "Blah blah blah, results 3"
},{
"name" : "Test name 4",
"results" : "Blah blah blah, results 4"
}]
}],
"questions" : ["When am I going to die?", "Why am I going to die?"]
}
$scope.prescriptions = [{
"name" : "Prescription name",
"dose" : "Once daily",
"form" : "tablet",
"duration" : "30 days",
"refills" : "3",
"expiration" : "9/1/2014"
},{
"name" : "Prescription name 2",
"dose" : "Twice daily",
"form" : "capsule",
"duration" : "60 days",
"refills" : "3",
"expiration" : "9/1/2014"
},{
"name" : "Prescription name 3",
"dose" : "Once daily",
"form" : "tablet",
"duration" : "30 days",
"refills" : "3",
"expiration" : "7/3/2012"
},{
"name" : "Prescription name 4",
"dose" : "Twice daily",
"form" : "capsule",
"duration" : "10 days",
"refills" : "3",
"expiration" : "7/3/2012"
}
];
}]);
You may want to take a look at ui-router. ui-router supports a more complex templating structure including multiple views in one page.
You could put header template out of ng-view and the data linked with globals $rootScope, and when you change the page, you should remove data from $rootScope to change in the header.
For example, to view only the ID from param....
'index.html'
<ng-include src="'templates/header.html'"></ng-include>
<div id="content-frame" ng-view></div>
'controllers.js'
osmosisApp.controller('SummaryCtrl', ['$scope', '$routeParams', '$rootScope', function ($scope, $routeParams, $rootScope) {
$rootScope.pacientId = $routeParams.id;
.........................
$scope.$on("$destroy", function(){
delete $rootScope.pacientId;
});
'headers.html'
{{pacientId}}
You can see this working in Plunkr
Related
I have 2 dropdown menus that are dependent on one another. The first one works perfectly, but I want the second dropdown to populate based on the choice in the first menu. I realize that similar questions have been asked before, but my data seems to be in a different format. Here is my code:
<body ng-app="patientSim" ng-controller="patientCtrl">
<button style="width:20%;" ng-click="addChar()">Add Characteristic</button>
<div class="row">
<div class="col-md-3"><select ng-model="selectedCategory" ng-options="x.cat as (x.cat | underFilter) for x in (enumChars | duplicateFilter)"></select></div>
<div class="col-md-3"><select ng-model="selectedName" ng-options="x.enumName as (x.enumName | underFilter) for x in enumChars"></select></div>
<div class="col-md-3"><button ng-click="eqWeight()">Equalize Weights</button></div>
<div class="col-md-3"><button ng-click="reset()">Reset</button></div>
</div>
And here are 2 sections of the JSON:
{
"enumID": 1,
"enumName": "Gender",
"isTree": false,
"enumAlloc": 10,
"enumVals": [
"Unknown",
"Male",
"Female",
"Transgender"
],
"enumText": null,
"cat": "Demographics"
},
{
"enumID": 2,
"enumName": "Race",
"isTree": false,
"enumAlloc": 15,
"enumVals": [
"Unknown",
"American Indian/Alaska Native",
"Asian",
"Black",
"Native Hawaiian/Other Pacific Islander",
"White/Caucasian",
"Other"
],
"enumText": null,
"cat": "Demographics"
},
The first dropdown is populated with "Demographics" and "Diseases and Injuries", both under the "cat" name. The entire file contains 5 "Demographics" sections and 1 "Diseases and Injures" section. All 6 sections are stored in a scope value called enumChars, which I used in ng-options. There are over 45,000 values for some sections, so I didn't want to post them here. My goal is for the second dropdown to populate with the "enumName" corresponding to the "cat". So for example, if I select "Demographics" in the first dropdown, the second dropdown will populate with "Gender", "Race", and the other enumName values in the other sections also containing "cat": "Demographics". How would I go about doing this? Thanks!!
If I understood your question well you want to populate with the enumVals the 2nd <select> based on the value selected in the 1st. <select>.
Then, if I'm correct, you can do the following:
(function() {
"use strict";
angular.module('app', [])
.controller('mainCtrl', function($scope) {
$scope.enumChars = [
{
"enumID":1,
"enumName":"Gender",
"isTree":false,
"enumAlloc":10,
"enumVals":[
"Unknown",
"Male",
"Female",
"Transgender"
],
"enumText":null,
"cat":"Any category"
},
{
"enumID":2,
"enumName":"Race",
"isTree":false,
"enumAlloc":15,
"enumVals":[
"Unknown",
"American Indian/Alaska Native",
"Asian",
"Black",
"Native Hawaiian/Other Pacific Islander",
"White/Caucasian",
"Other"
],
"enumText":null,
"cat":"Demographics"
}
];
});
})();
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.5.7/angular-messages.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<button style="width:20%;" ng-click="addChar()">Add Characteristic</button>
<div class="row">
<div class="col-md-3">
<select ng-model="selectedCategory" ng-options="obj as obj.cat for obj in enumChars"></select>
</div>
<div class="col-md-3" ng-if="selectedCategory">
<select ng-model="selectedName" ng-options="enum for enum in selectedCategory.enumVals"></select>
</div>
<div class="col-md-3">
<button ng-click="eqWeight()">Equalize Weights</button>
</div>
<div class="col-md-3">
<button ng-click="reset()">Reset</button>
</div>
</div>
</body>
</html>
I am new to angularjs. I am trying to add check boxes into a particular scope.group
Below is the mock-up of what i want to achieve and code.
<accordion close-others="false">
<accordion-group ng-repeat="group in groups" is-open="group.open">
<accordion-heading>
<i ng-class="{'icon-minus-sign':groups[$index].open,'icon-plus-sign':!groups[$index].open }"></i>
<span class="title-pos" >{{group.title}}</span>
</accordion-heading>
{{group.content}}
</accordion-group>
</accordion>
<script>
angular.module('main',['ui.bootstrap'])
.controller('AppCtrl', function($scope){
$scope.groups = [
{
"title":"Series",
"open":true
},
{
"title":"Price Range",
"content":"Content B",
"open":true
},
{
"title":"Engine Type",
"content":"Content C",
"open":false
},
{
"title":"Engine Type",
"content":"Content C",
"open":false
},
{
"title":"Life Style",
"content":"Content C",
"open":false
},
{
"title":"Seats",
"content":"Content C",
"open":false
},
];
})
</script>
I would like to add the check box to Engine type group.
Look forward for any help
Thanks in advance
Replace {{group.content}} with <div ng-bind-html="group.content"></div>
You should then add your checkboxes HTML code inside "content" part of "Engine Type" group, similar to this :
...
{
"title":"Engine Type",
"content":'<input type="checkbox" name="checkbox1" value="Petrol">Petrol',
"open":false
},
...
For each one of the enteries in $scope.groups whatever comes in "content" will appear inside <div ng-bind-html="group.content"></div> block.
Finally, Be sure to add ngSanitize to your module dependencies as in this plunkr
You can add the checkboxes in the content area
<accordion-group ng-repeat="group in groups" is-open="group.open">
<accordion-heading>
<i ng-class="{'icon-minus-sign':groups[$index].open,'icon-plus-sign':!groups[$index].open }"></i>
<span class="title-pos" >{{group.title}}</span>
</accordion-heading>
<div ng-repeat="option in group.options">
<!-- checkbox and text here -->
</div>
</accordion-group>
And reorganize your data to include the checkboxes model
$scope.groups = [
{
"title":"Engine Type",
"content":"Content C",
"open":false,
"options": [
"Petrol", // or if you have id for them: {id:engine_petrol, name:"Petrol"}
"Diesel",
"Hybrid"
]
}
];
So I'm trying to duplicate the section div (so I can have multiple sections with multiple articles). I tried using the same controller for both divs as shown below. So I'm able to add the section by appending it to main but I can't edit the second div. Is there any way around this?
I am not using bootstrap and i'm using xeditable.
HTML:
<div id="main" ng-app="main">
<div class = "section" ng-controller="newsController">
<h2 id="section" editable-text="sections.section">{{sections.section}}</h2>
<div class = "article" ng-repeat="article in sections.articles">
<h3 id="title" editable-text="article.title"><a editable-text="article.link" href="{{article.link}}">{{article.title}}</a></h3>
<p id="publisher" editable-text="article.publisher">{{article.publisher}}</p>
<p id="orig_title" editable-text="article.orig_title">{{article.orig_title}}</p>
<p id="descr" ng-bind-html="article.description" editable-text="article.description"></p>
</div>
<div class = "section" ng-controller="newsController">
</div>
</div>
JS:
newsletter.controller('newsController',function($scope){
$scope.sections = {
section: "Faculty",
articles: [
{
title: "In __ We Trust",
link:'http://wee.com',
publisher: "Me",
orig_title:"",
description: "Description Here"
}
]
};
$scope.addItem = function(){
$scope.sections.articles.push(this.sections.articles.temp);
$scope.sections.articles.temp={};
};
)};
var newSection = '//Pretend all the tags and the attributes as above are placed here'
$("#add-section").click(function(){
var $section = $('#main').append(newSection);
});
Apologies for formatting. I'm still new to this. Thanks!
Edit: I'm also trying to make this dynamic so the user could edit the texts like the title and the publisher, etc. How would I make the added section also editable?
Try it this way, instead of appending it uses angulars natural way of repeating divs aka ng-repeat:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sections = {
section: "Faculty",
articles: [{
title: "In __ We Trust",
link: 'http://wee.com',
publisher: "Me",
orig_title: "",
description: "Description Here"
}]
};
$scope.addItem = function() {
$scope.sections.articles.push(this.sections.articles.temp);
$scope.sections.articles.temp = {};
};
var newSection = '//Pretend all the tags and the attributes as above are placed here'
$("#add-section").click(function() {
var $section = $('#main').append(newSection);
});
});
</script>
<div id="main" ng-app="myApp" ng-controller="myCtrl">
<div class="section" ng-repeat="i in ['0','1']">
<h2 id="section" editable-text="sections.section">{{sections.section}}</h2>
<div class="article" ng-repeat="article in sections.articles">
<h3 id="title" editable-text="article.title"><a editable-text="article.link" href="{{article.link}}">{{article.title}}</a></h3>
<p id="publisher" editable-text="article.publisher">{{article.publisher}}</p>
<p id="orig_title" editable-text="article.orig_title">{{article.orig_title}}</p>
<p id="descr" ng-bind-html="article.description" editable-text="article.description"></p>
</div>
<div class="section" ng-controller="myCtrl"></div>
</div>
I Got the answer! So I applied the app to the html document and the controller to the body as opposed to the main div and made an array of sections as opposed to a singular section. I did a ng-repeat for the section div. By doing so, I added a "addsection" function where I create a section to be added to the array and the section has to have the same properties as the other ones including an empty array of articles.
HTML:
<body ng-controller="newsController">
<ul id="convenient-buttons">
<li id="add-section">Add Section</li>
<li>Select All</li>
<li><a href=# id="export" onclick="selectText('json')" ng-mouseenter="showJson=true" ng-mouseleave="showJson=false" >Send to Server</a></li>
</ul>
<div id="main">
<div class = "section" ng-repeat="section in news.sections" >
<h2 id="section" editable-text="sections.section">{{sections.section}}</h2>
<div class = "article" ng-repeat="article in sections.articles">
<h3 id="title" editable-text="article.title"><a editable-text="article.link" href="{{article.link}}">{{article.title}}</a></h3>
<p id="publisher" editable-text="article.publisher">{{article.publisher}}</p>
<p id="orig_title" editable-text="article.orig_title">{{article.orig_title}}</p>
<p id="descr" ng-bind-html="article.description" editable-text="article.description"></p>
</div>
</div>
</body>
JS:
$scope.news = {
sections: [
{
title: "Faculty",
articles: [
{
title: "In Memoriam: Eli Pearce",
link:'http://engineering.nyu.edu/news/2015/05/29/memoriam-eli-pearce',
publisher: "NYU Newsroom",
orig_title:" ",
description: "When <strong>Professor Eli Pearce</strong> passed away on May 19, 2015, a slice of Poly history passed along with him. Pearce had been affiliated with the school, then known as the Polytechnic Institute of Brooklyn, since the mid-1950s, when he conducted his doctoral studies in chemistry here. As a student, he learned with such luminaries as Herman Frances Mark, who is often called the Father of Polymer Science, and Charles Overberger, another influential chemist who helped establish the study of polymers as a major sub-discipline."
}
]
}
]
};
$scope.addSection = function(){
$scope.news.sections.temp={
title: "Section Title",
articles:[
// {
// title:"Article Title",
// link:"Link",
// publisher: "Publisher",
// orig_title: "Original Title",
// description: "Description"
// }
]
};
$scope.news.sections.push(this.news.sections.temp);
};
I for my stage have to modifie a web site for that i need angularjs i wanted to use the command ng-repeat to display some documentation but when i add ng-repeat in the div it "destroy" it and i cant figure out why...
So there is the code hope u can help me.
There is my js
App.controller('doccontroller', [ function(){
return {
scope: {},
restrict: 'A',
link: function ($scope){
$scope.docs = [
{
"id_section" : 0,
"description": "RANDOM STUFF",
"source": [
{
"python": "TEXTE",
"ruby": "TEXTE",
"javascript": "TEXTE"
}
]
},
{
"id_section" : 1,
"description": "RANDOM STUFF",
"source": [
{
"python": "TEXTE",
"ruby": "TEXTE",
"javascript": "TEXTE"
}
]
},
{
"id_section" : 2,
"description": "RANDOM STUFF",
"source": [
{
"python": "TEXTE",
"ruby": "TEXTE",
"javascript": "TEXTE"
}
]
}
]
}
}
}
])
`There is my route to "include" the controller
$routeProvider.when '/docs',
templateUrl : config.BaseHtml+'/Page/docs.html'
controller : 'doccontroller'
`
and to finish the html :)
<div id="api-docs">
<div id="methods">
<div class="languages">
<a class="language selected" data-lang="ruby" href="#">Ruby</a>
<a class="language" data-lang="python" href="#">Python</a>
<a class="language" data-lang="php" href="#">PHP</a>
</div>
<div>
<div class="method" id="intro">
<div class="method-section clearfix">
<div class="method-description" ng-repeat="doc in docs">
<h3>Introduction</h3>
<p>
{{doc.description}}
</p>
</div>
<div class="method-example">
<pre>
<code class="ruby"># All this code is just folololol
React.api_key = "In here goes your api key!"</code><code class="python"># All this code is just for demonstration purposes
react.api_key = "In here goes your api key!"</code><code class="php"># All this code is just for demonstration purposes
React::setApiKey("In here goes your api key!");</code>
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
So to say it again, what i need to do is to fill create 1 div / id_section and to fill it with the
descrition for now.
Change:
ng-repeat="docs in docs"
to:
ng-repeat="doc in docs"
Also, in your code you have a call to {{ doc.des }}, which probably should be {{ doc.description }}
I have created a code and I'm repeatable in text with icon.
You see the img but I want to hide to this actually I show this image if I have a anchor link than show if I have no link than not show this image. Is this possible in angular js?
My code is:
Angular Code is
var myAppMy = angular.module('myFapp', []);
myAppMy.controller('myControler', function($scope) {
$scope.items = [
{
"title":"Book" ,"subtitle":[
{"subtitle":"PanchTantra ",
"description":"Kids Books",
"authorName":"Kisna"
}
],
"description": "Some Book is very Good."
},
{
"title":"Mediciane Book" , "subtitle":[
{"subtitle":"Pharmacy", "description":"This book is related to Docotrs"}
],
"description": "This book is very hard"
},
{
"title":"Reciape Book" , "subtitle":[
{"subtitle":"Khana Khajana", "description":"This book is related to Foods"}
],
"description": "This book is nice..."
},
{
"title":"Computer Book" , "subtitle":[
{"subtitle":"BCA MCA", "description":"This book is related to Education"}
],
"description": "This book is very beautiful."
}
];
});
HTML Code is
<body ng-app="myFapp">
<ul ng-controller="myControler">
<li ng-repeat= "item in items">
<div>{{item.title}} </div>
<div>{{item.description}}</div>
<ul>
<li ng-repeat="subtitle in item.subtitle">
<div>{{subtitle.subtitle }} <img src="https://www.gravatar.com/avatar/76e03db06bb6dcf24f95bf4d354486db?s=32&d=identicon&r=PG" />{{ subtitle.authorName}} </div>
<div>{{subtitle.description}} this is </div>
</li>
</ul>
</li>
</ul>
</body>
Plunkr link is
Is this what you want to do ?
<div>{{subtitle.subtitle }} <img src="https://www.gravatar.com/avatar/76e03db06bb6dcf24f95bf4d354486db?s=32&d=identicon&r=PG" />{{ subtitle.authorName}} </div>
http://plnkr.co/edit/6tnGlTLeLUZdiGCUHDFV?p=preview
The ng-show directive allows you to show or hide the given HTML element based on the expression provided.
See the Official doc