Show Hide div area in Angular JS

This is my second post on angular js.

In this post I have create 2 radiobutton and will show hide a div area on basis of selection.

 Create a "AngularModelController.js" file and write below code:


 /// <reference path="angular.min.js" />
var myApp = angular.module('angularApp', [])
myApp.controller("angularController", function ($scope) {
    $scope.message = "This is my Angular JS post";
});

 Below is the complete html code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/AngularModelController.js"></script>
</head>
<body>

     <form id="form1">
       <div ng-app="angularApp" ng-controller="angularController">
            <h1>{{message}}</h1>
            <input id="rdBtn1" type="radio" name="rdOption" ng-model="rdBtnShowHide" value="show" />Show me
            <input id="rdBtn2" type="radio" name="rdOption" ng-model="rdBtnShowHide" value="hide" />Hide me
            <div style="padding:20px;"></div>
            <div ng-show="rdBtnShowHide == 'show'">Welcome to the world of Angular JS</div>
            <div ng-show="rdBtnShowHide == 'hide'">Data Hide</div>
        </div>
    </form>
</body>
</html>

 Output:

Comments

Post a Comment

Popular posts from this blog

CAML Query in SharePoint 2010

CAML stands for Collaborative Application Markup Language. CAML query generally used on SharePoint objects like List, Library, List Template, Content Type etc.

CAML query helps to fetch items from SharePoint list, CAML query is use to update, delete record from SharePoint list and library.

Below is the code to fetch items from SharePoint Announcement List.
CAML Query with Client Object Model:
   class Program     {         static void Main(string[] args)         {             string siteUrl = "http://myserver:1985";
            ClientContext clientContext = new ClientContext(siteUrl);             SP.List oList = clientContext.Web.Lists.GetByTitle("Announcements");
            CamlQuery camlQuery = new CamlQuery();             camlQuery.ViewXml = "<View><RowLimit>100</RowLimit></View>";
            ListItemCollection collListItem = oList.GetItems(camlQuery);
            clientContext.Load(collListItem,                  items => items.Include( …
Keep reading

Calling REST APi from server side code - C#

Hi,

I was working on a project where i got a web api url with parameters, i was asked to consume this api and get response from there.

I got below details:

Api urlparametersand response code eg 200 for ok, 404 for not found etc.
Here is the code which will consume the web api and will get response from there.
This is 100% working code.

public class Program
    {

        static void Main(string[] args)
        {
            Program.CreateObject();
        }

        private static void CreateObject()
        {

            string name = "jack";
            string phone= "0000000000";


            string URL = "http://myserver/api.php?name=" + name + "&phone=" + phone;
            string DATA = @"{""name"":""jack""},{""phone"":""0000000000""};

            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(URL);
            request.Method = "POST";
            …
Keep reading

All about SharePoint 2010 Content Type Hub

Content type hub is a new feature which comes with Managed Meta Data Service in SharePoint 2010. I have worked with SharePoint 2007 and i know that there is a problem for creating an enterprise library and sharing them across the site collections. There were no out-of-box solution to share content type which is created under a single site collection.
New Managed Meta Data Service in SharePoint 2010 has overcome this problem. Using this new feature a content type which is created under a single site collection can be shared across multiple site collections.


1. So lets start content type hub by creating a site collection.

2.After creating site collection, go to Site Actions->Site Settings->Site Collection Feature (Under Site    Collection Administration)


3.Now go to Service Application in Central Admin. Select ManagedMetaData and click on Properties   in top ribbon. Enter the url of site collection you created in step 1.(enter url in below field)

4. Now select Managed Metadata Se…
Keep reading

SharePoint Interview Questions and Answers

Below are few SharePoint questions asked in Interview.

Q. Explain Below code

using (SPSite site = new SPSite(SPContext.Current.Web.Url))// Gets the absolute url of the website

using (SPWeb web = site.RootWeb) //  Gets the root website of site collection

using (SPWeb web = site.OpenWeb())// OpenWeb accepts either GUId of sites or site url, if parameter is blank means returns the site associated with the current url

SPWeb - Represents SharePoint service websites

SPSite -  Represents a collection of sites in a web application.

SPWebApplication - Represents and IIS web application.

SPWebCollection - Represents a collection of SPWeb object.

SPWebTemplate - Represents a site definition or site template that is used to create SharePoint sites.

SPList - Represents a list on SharePoint Site.

SPListCollection - Represents a collection of SPList object.

SPListItem - Represents a list item or row.

SPListItemCollection - Represents a collection of SPListItem object

Base class for Timer Job - SPJobDefinition
Base…
Keep reading

Calling ASP.Net WebMethod using jQuery AJAX

Jquery allow users to call server side code without any postback.
Follow below steps:

Create a table with below script:

SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

SET ANSI_PADDING ON
GO

CREATE TABLE [dbo].[userTable](
[id] [int] IDENTITY(1,1) NOT NULL,
[name] [varchar](50) NULL
) ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO


Write stored procedure to save data into table:

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO

CREATE PROCEDURE InsertData

@name varchar (50)
AS
BEGIN

SET NOCOUNT ON;
insert into [dbo].[userTable] (name) values(@name)
END
GO

AJAX Method to Call Web method

  function SaveData() {
            var name = document.getElementById('<%=txtName.ClientID %>').value;

            $.ajax({
                type: "POST",
                url: /MyFolder/MyAjaxPage.aspx/SubmitData",
                data: '{"name":"' + name + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
   …
Keep reading