Develop Reference

Show html tags on the page with ng-bind-html

Please see below given code:
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myText"></p>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myText = "My name is: <h1>John Doe</h1>";
});
</script>
The output is: My Name is:
John Doe
How can i show the text as it is. For example: My Name is : <h1>John Doe</h1>
I want to show the HTML tags on the page.

Please use the $sce of angularjs.
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope, $sce) {
$scope.myText = $sce.trustAsHtml("My name is: <h1>John Doe</h1>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<div ng-app="myApp" ng-controller='MyController'>
<p ng-bind-html="myText"></p>
</div>
Reference:
How to use $sce

First create a filter using $sce:
app.filter("html", ['$sce', function($sce) {
return function(input){
return $sce.trustAsHtml(input);
}
}]);
Then:
<div ng-bind-html="myText | html"></div>

Use ng-bind instead ng-bind-html
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="myText"></p>
</div>
Or simply
<p>{{myText}}</p>

I think you should use like this
in your controller
$scope.mytext="&lth1&gtJohn Doe&lt/h1&gt"
in you html page
<p ng-bind-html="myText"></p>

Filter files in folder and display them using ng-repeat (JS, Angular)

So, I've got some folder archives that contains unknown number of files, I know that:all of them got .7z extensionhalf starts with letters AB and other half - CD
So folder's content looks like:AB1234567890.7zAB2345678901.7zCD1234567890.7zCD2345678901.7z etc. That is I can do something like this:
Download
And on click it's gonna start downloading archive with name AB1234567890.7z. It's okay, but obviously I can't write links like that, it must be done with ng-repeat. So the question is - how to display 2 lists of links, where first list would be list with links which starts with AB and second - which starts with CD, respectively. Any help will be greatly appreciated :)

What about this:
angular.module('app',[]).controller('test', ['$scope', '$http', function($scope, $http){
//$http({ method: 'GET', url: '/getNames'}).then(function(names) {
// $scope.files = names;
//})
$scope.files = ['AB1234567890.7z',
'AB2345678901.7z',
'CD1234567890.7z',
'CD2345678901.7z'];
$scope.startWith = function(file, name){
return file.indexOf(name) == 0;
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='test'>
<p>First list</p>
<div ng-repeat='file in files' ng-if="startWith(file, 'AB')">
<a href='archives/{{file}}'>{{file}}</a>
</div>
<p>Second list</p>
<div ng-repeat='file in files' ng-if="startWith(file, 'CD')">
<a href='archives/{{file}}'>{{file}}</a>
</div>
</div>

I think this will help you
<div ng-controller="AppCtrl" layout="row" ng-cloak="" ng-app="MyApp">
<div layout="column" flex>
<a ng-repeat="file in archivesAB" href="archives/{{file}}" download="{{file}}">{{file}}</a>
</div>
<div layout="column" flex>
<a ng-repeat="file in archivesCD" href="archives/{{file}}" download="{{file}}">{{file}}</a>
</div>
</div>
(function () {
'use strict';
angular
.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', AppCtrl);
function AppCtrl ($scope, $log) {
$scope.archivesAB = [
'AB1234567890.7z',
'AB2345678901.7z'
];
$scope.archivesCD = [
'CD1234567890.7z',
'CD2345678901.7z'
];
}
})();
And here is the working codepen

Insert $index into name attribute in an ng-repeat angularJS

In order for ASP.NET MVC to correctly bind a list of items on a form post, the name attribute has be along the lines of
name='Show.Days[0].OpenHour'
name='Show.Days[1].OpenHour'
The user can enter the number of days the show will be into a form field, which then updates the model and the ng-repeat.
I'd like to be able to insert the appropriate index into the name field, something like
name='Show.Days[$index].OpenHour'
Is this possible with angular?

Use name="Show.Days[{{$index}}].OpenHour". With this, AngularJS evaluates $index and replaces it with the correct value.

It seems that you forgot to wrap the expression with {{ and }} in the view. Do you need something like this?
var app = angular.module('myApp', []);
app.controller("myCtrl", function ($scope) {
$scope.Show = {
Days: [
{OpenHour: '8am'},
{OpenHour: '10am'}
]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div ng-repeat="day in Show.Days">
<input type="text" ng-model="Show.Days[$index].OpenHour" name="{{Show.Days[$index].OpenHour}}">
</div>
</div>
</div>
or like this?
var app = angular.module('myApp', []);
app.controller("myCtrl", function ($scope) {
$scope.Show = {
Days: [
{OpenHour: '8am'},
{OpenHour: '10am'}
]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div ng-repeat="day in Show.Days">
<input type="text" ng-model="Show.Days[$index].OpenHour" name="Show.Days[{{$index}}].OpenHour">
</div>
</div>
</div>

Append HTML with AngularJS

HTML
<section>
<div>
<p>{{item}}</p>
</div>
</section>
controller.js
(function () {
var ctrl = function ($scope){
$scope.item = "test";
}
}());
This is my team's project. I cannot change how it is set up. The problem I am trying to solve is inserting the $scope.item into the html. How could I do this?

I added an id _item in section.
<section id="_item">
<div>
<p>{{item}}</p>
</div>
</section>
Write this below code inside the controller.js file.
angular.element(document.getElementById('_item')).append($compile("<div>
<p>{{item}}</p>
</div>")($scope));
Note: add dependency $compile.
I think this will help you.

This is one of the most basic ways to do it.
angular.module('myApp', [])
.controller('myController', function($scope){
$scope.item = 'test'
});
<div ng-app="myApp" ng-controller="myController">
<p>{{item}}</p>
</div>
UPDATE
[app.js]
myApp = angular.module('myApp', []);
[controller.js]
myApp.controller('myController', function($scope){
$scope.item = 'test'
});

Add ng-controller="your_controller_name" to your HTML.
<section ng-controller="myController">
<div>
<p>{{item}}</p>
</div>
</section>

The title of the answer might be missleading. If you really want to append HTML with Angular JS, I think what you need is the ng-bind-html directive
https://docs.angularjs.org/api/ng/directive/ngBindHtml
your html code should be something like
<section>
<div>
<p ng-bind-html="item"></p>
</div>
</section>
the following conf in your controller
.controller('myController','$sce' function($scope, $sce){
$scope.item = $sce.trustAsHtml("<div> this is really appending HTML using AngularJS </div>");
});

Need some help in my AngularJS learning

I have some html-code
<div ng-controller="aboutController">
<p ng-repeat="name in about">
{{about.name}}
{{about.surname}}
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('aboutController', function($scope, $http) {
$http.get('about.json').success(function(data) {
console.log('this is data:',data);
$scope.about = data;
});
});
</script>
what which derective I must to write, simply to insert data from a json-file without repeating them?

You don't need any directive. Just remove ngRepeat and use
<p>
{{about.name}}
{{about.surname}}
</p>
ngRepeat is generally used with collection.
The ngRepeat directive instantiates a template once per item from a collection.

problem is "about." try as "name."
Try as below:
<p ng-repeat="name in about">
{{name.name}}
{{name.surname}}
</p>