How can i pass the Url.action with parameter from angular object?
refer to new { id ="{{item.Title}}", title = "" } section in code below.
i cant do it like id ={{item.Title}} this renders it as an string.
<div ng-app class="container-fluid">
<div class="row-fluid">
<div ng-controller="MostViewedToolController" class="span2">
<ul class="nav nav-list">
<li><h4><b>Most Viewed</b></h4></li>
<li ng-repeat="item in tools">
{{item.Title}}
</li>
</ul>
</div>
#RenderBody()
</div>
</div>
Please follow the below process, i have implemented it and it's working fine.
< a ng-href="#Url.Action("Index","home")?id={{item.ID}}&title={{item.Title}}"> link_name < / a>
This fixed it.
<a ng-href="#Url.Action("Index", "home"){{item.ID}}/{{item.Title}}"> {{item.Title}}</a>
Related
I have a JSON object that has an array of ingredients within, I want to repeat each object into an <li> so I can list them out. The area I want to repeat is the "ingredientLines"
My JSON is
My current code is, I currently just get all 10 objects listed out in a single <li>
<ion-content>
<ion-list>
<ion-item>
<div class="thumb">
<ion-img src="{{api?.images["0"].hostedLargeUrl}}">
<h1>{{api?.name}}</h1>
</div>
<div class="action-bar">
<div class="like">
</div>
<div class="time">
<span>{{api?.totalTime}}</span>
</div>
<div class="share">
</div>
</div>
<div class="ingredients" ng-repeat="items in api">
<ul>
<li>{{api?.ingredientLines}}</li>
</ul>
</div>
</ion-item>
</ion-list>
</ion-content>
If someone could point out where I'm going wrong that would be great!
Try to repeat the right object in the right HTML-Element and you will be fine. Here is a abstract working fiddle of what you try to achieve.
<div class="ingredients">
<ul>
<li *ngFor="let item of api?.ingredientLines">{{item}}</li>
</ul>
</div>
This question have good chance to be a duplicate, but after some searches I wasn't able to find a good explanation to my problem - so I apologize if this is the case.
Well, I got a template which is actually written like this:
<div ng-include="'includes/header.html'"></div>
<section>... Template for homepage, page1, page2... </section>
<div ng-include="'includes/footer.html'"></div>
My header.html is like this:
<section class="header">
<div class="wrapper">
<img id="logotype" src="images/logotype.png">
<ul id="menu">
<li>
Home
</li>
<li class="border-none">
<a class="a" ng-click="chatClicked = !chatClicked">Click to chat</a>
</li>
<li id="logout" class="glyphicon glyphicon-off border-none">
Logout
</li>
</ul>
</div>
</section>
And my footer.html like this:
<section class="footer">
<div class="wrapper">
<ul id="menu-left">
<li>
Home
</li>
<li>
<a class="a" ng-click="chatClicked = !chatClicked">Click to chat</a>
</li>
</div>
</section>
I was wondering if there is a way to open open/hide this new include on all pages (
<div ng-if="chatClicked" ng-controller='ChatController' ng-include="'includes/popup-chat-to-click.html'"></div>
) each time the event chatCliked is triggered - and if it is possible - where it is the best to place this last div?
Ok problem resolved using this link, sorry:
AngularJS - losing scope when using ng-include
This was a matter of $scope.
I had to add this in my controller:
app.controller('homeController',
['$scope'',
function ($scope) {
$scope.chat = { clicked: false };
}]);
in my main view:
<div ng-include="'includes/header.html'"></div>
<div ng-if="chat.clicked" ng-controller='ChatController' ng-include="'modules/chat/popup-contact.html'"></div>
in my header.html:
<a class="a" ng-click="chat.clicked = !chat.clicked">Contact us</a>
I have a trivial problem out there. I need to make a filter search on the page with input . I'm using a boonex platform. I need to insert the input tag and it should hide or show the DIV blocks wich depends of value of input. this is the a code of my HTML page:
<ul id="navtabsidebar" class="nav nav-justified nav-tabs">
<bx_repeat:tabs_name>
<li class="__status__">
<a data-toggle="tab" href="#__tab_name__"><i class="fa fa-__icon__"></i></a>
</li>
</bx_repeat:tabs_name>
</ul>
<div class="tab-content" ng-app>
<input type="text" ng-model="filter">
<bx_repeat:tabs>
<div id="__tab_name__" class="tab-pane __status__">
<bx_repeat:users_list>
<div class="memberUser">
__user_avatar__
__chat__
</div>
</bx_repeat:users_list>
</div>
</bx_repeat:tabs>
</div>
Does someone how any ideas? Thanks guys
so I'm stacking on this problem.
I try to create tabs with loading via ng-include the contents. But doesn't matter what kind of url I include I get always this error http://goo.gl/yyNeQb
I don't have anything else included (Controller,...)
Someone any idea?
<ul class="nav nav-tabs">
<li ng-class="{active: main.active.tab == 'register'}" class="active">
<a ng-click="main.active.tab = 'register'">Register</a>
</li>
<li ng-class="{active: main.active.tab == 'login'}">
<a ng-click="main.active.tab = 'login'">Login</a>
</li>
</ul>
<div class="tab-content">
<div ng-switch="main.active.tab">
<div
ng-switch-when="register"
ng-include src="'../angular/views/register.html'">
</div>
<div
ng-switch-when="login"
ng-include src="'../angular/views/login.html'">
</div>
</div>
</div> <!-- tab content-->
If I include a Controller like this
<script type="text/javascript" src="../angular/controller/RegisterController.js"></script>
The source will be load and I can work with it.
Have not tested it immediately but can you try this instead?
<div class="tab-content">
<div ng-switch="main.active.tab">
<div ng-switch-when="register">
<ng-include src="'../angular/views/register.html'"></ng-include>
</div>
<div ng-switch-when="login">
<ng-include src="'../angular/views/login.html'"></ng-include>
</div>
</div>
</div>
Being new to Angularjs, I need a bit of help with this issue. I am attempting to add ng-click="getGallery(57)" to a modal tab. Adding via jQuery is not the issue, however I realize when I do this, Angular is not compiling the newly added ng-click. I have a simple controller
function imageGalleryCtrl ($scope, $http) {
//get gallery info on click
$scope.getGallery = function(id)
{
$http.post('/beta/images/get_images',{'id': id}).success(function(data)
{
$scope.images = data.thisGal_images;
$scope.images.galID = id;
});
};
}
I add the ng-click to the element with jQuery
//Edit image tab to use angularjs
$('#image_edit a').attr('ng-click','getGallery(' + settings.id + ')');
How do I force Angular to compile this newly added ng-click?
Thanks!
HTML Modal:
This is the modal that is called when the gallery name is clicked.
<div class="modal fade hide modal-creator" id="imageUploader" tabindex="-1" data-focus-on="input:first">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h3>Create New Gallery</h3>
</div>
<div class="modal-body">
<ul id="myTab" class="nav nav-tabs">
<li id="image_home" class="">
Home
</li>
<li id="image_upload" class="">
Upload Image Gallery
</li>
<li id="image_edit" class="">
Edit Image Gallery
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in" id="home">
<?php include('create.php'); ?>
</div>
<div class="tab-pane fade" id="upload">
<?php include('upload.php'); ?>
</div>
<div class="tab-pane fade" id="edit">
<div class="span9">
<ul id="imageSort" class="gallery-container">
<li ng-repeat="image in images">
<img ng-src="http://images.onlinealbumproofing.com/imageGallery/{{image.galleryID}}/{{image.imageName}}" alt="">
{{image.orgName}}
</li>
</ul>
</div><!-- /span9 -->
</div><!-- /row -->
</div>
</div>
</div><!-- /modal-body -->
<div class="modal-footer">
Close
Next
</div>
</div>
Update
So really attempting to do this the Angular way, and after some studies here is where I am at.
The controller is the same as above and I have updated the tabs on the modal as follows.
<div class="modal-body">
<ul id="myTab" class="nav nav-tabs">
<li id="image_home" class="">
Home
</li>
<li id="image_upload" class="">
Upload Image Gallery
</li>
<li id="image_edit" class="">
<a ng-click="getGallery(57)" href="#edit" data-toggle="tab">Edit Image Gallery</a>
</li>
</ul>
If I hard code the ng-click as above, the tab updates as expected. What I am trying to make happen, is when the modal is called, (#image_edit a) gets a defined ng-click="getGallery(id). I need to tell Angular to look at the ng-click again for the id.
Although I too think that you should try and find another approach, the answer to your question
How do I force Angular to compile this newly added ng-click?
is
// remove and reinsert the element to force angular
// to forget about the current element
$('#button1').replaceWith($('#button1'));
// change ng-click
$('#button1').attr('ng-click','exec2()');
// compile the element
$compile($('#button1'))($scope);
See this working example: http://plnkr.co/edit/SgvQzaY0TyFHD1Mf0c3F?p=preview
Basically what I'm getting at is you want to probably make this happen:
<ul id="imageSort" class="gallery-container">
<li ng-repeat="image in images">
<img
ng-src="http://images.onlinealbumproofing.com/imageGallery/{{image.galleryID}}/{{image.imageName}}"
alt=""
ng-click="getGallery(image.galleryID)"
>
{{image.orgName}}
</li>
</ul>
The problem is I'm unsure of the relationship between the settings.id and the galleryID for a particular image. If you can set up this relationship in the data so it just automatically binds you're in better shape.