I want to pass a variable or text through to a template so that it shows the value inside my template.
I come across jsFiddle which shows it working but it uses ng-repeat. Is there a simplere way to do this without using ng-repeat?
<div ng-repeat="name in ['John']" ng-include="'partial.html'"></div>
<div ng-repeat="name in ['Jack']" ng-include="'partial.html'"></div>
<script type="text/ng-template" id="partial.html">
<div>The name is {{ name }}</div>
</script>
http://jsfiddle.net/f97keutL/
<div ng-controller="ctrl">
<div ng-include="'partial.html'"></div>
</div>
<script type="text/ng-template" id="partial.html">
<div>The name is {{ name }}</div>
</script>
JS:
var myApp = angular.module('myApp',[]);
myApp.controller('ctrl', function($scope) {
$scope.name = "John";
});
You just set the variable in the scope, and include the template?
Related
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="<h1>John Doe</h1>"
in you html page
<p ng-bind-html="myText"></p>
So I have a nested ng-repeat like so:
<div ng-repeat="data in flow" ng-init="$flowIndex = $index">
Index: {{ $index }}
<div ng-click="flow.splice($index, 1)">Delete me</div>
<div ng-repeat="inside_data in flow[$flowIndex]">
Inside index: {{ $index }}
</div>
</div>
I want to be able to delete index in my $flowIndex. However if I have something like this:
0
1
2
3
And I delete index 2. If I go and delete index 3, it isn't found because ng-init variable still things its at index 3 but really its not at index 2.
Does anyone know a work around?
You can get rid of $flowIndex, it's not necessary, you can use $parent.$index instead, when you are using ngRepeat it creates a child scope and $index is part of that scope. Also consider moving your deleting logic into the controller.
Controller:
$scope.delete = function ($index) {
$scope.flow.splice($index, 1);
};
Html:
<div ng-repeat="data in flow">
Index: {{ $index }}
<div ng-click="delete($index)">Delete me</div>
<div ng-repeat="inside_data in flow[$index]">
Inside index: {{ $parent.$index }} -> {{ $index }}
</div>
</div>
I believe you can get the parent index like so:
$parent.$index
As mentioned in this answer: passing 2 $index values within nested ng-repeat
That way you don't have to worry about your variable being out of sync with your current state.
I just tested your similar code with some dummy data strings and the delete appears to work. I made some updates to your code to better analyze it.
// Code goes here
var myApp = angular.module('myApp',[]);
myApp.controller('MyController', ['$scope', function($scope) {
$scope.flow = [
["test01","test02","test03"],
["test11","test12","test13"],
["test21","test22","test23"],
["test31","test32","test33"],
["test41","test42","test43"]
]
;
}]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="//opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<section ng-controller="MyController">
<div ng-repeat="data in flow">
Index: {{ $index }}
<div ng-click="flow.splice($index, 1)">Delete me [{{ $index }}]</div>
<div ng-repeat="inside_data in flow[$index]">
Inside index: {{ $index }} : {{ inside_data }}
</div>
<hr>
</div>
</section>
</body>
</html>
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>
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>
Here is my html code
<div ng-app='app'>
<div ng-controller="MyController" ng-init="myVar=7">
{{myVar}}
<span ng-init="myVar=myVar+5">{{myVar}},</span>
<span ng-init="myVar=myVar+15">{{myVar}},</span>
<span ng-init="myVar=myVar+37">{{myVar}},</span>
</div>
and script
var app = angular.module('app',[]);
app.controller('MyController', function() {});
The output I'm getting is 64,64,64,64
but I want output as 7,12,27,64
I'm trying to find things like ng-repeat but I cant kept these in an array
In every ng-init you're altering the value of myVar that is data bound to all other instances; and that's why they all show the same. So rather do:
<div ng-app='app'>
<div ng-controller="MyController" ng-init="myVar=7">
{{myVar}}
<span>{{myVar+5}},</span>
<span>{{myVar+15}},</span>
<span>{{myVar+37}},</span>
</div>