Develop Reference

Issue with populating partial view with AngularJs and MVC

I am new to AngularJs. I am using a partial view for Create and Edit operation but facing some issue wile retrieving the data.
The data is being retrieved successfully from my MVC controller but is unable to populate the view.
Here is the JS I am using
(function (angular) {
'use strict';
angular.module('Sub_Ledger_Category_Create_app', [])
.controller('Sub_Ledger_Category_Create_ctrl', function ($scope, $http, $location) {
$scope.SubLedgerCategoryModel = {};
GetRequestType();
function GetRequestType() {
$http.get('/Common/Get_Action_Request')
.success(function (result) {
//debugger;
// $scope.SubLedgerCategoryModel = data;
if (result == "Create") {
$("#txt_Master_Subledger_Category").html("<h3 class='box-title'> Create Sub Ledger Category </h3>");
// $("#txt_Master_Accounting_Group_Group_id").val(0);
}
else {
$("#txt_Master_Subledger_Category").html("<h3 class='box-title'> Edit Sub Ledger Category</h3>");
//GetEditData();
$scope.GetEditData();
}
$("#Master_Subledger_Category").val(result)
NProgress.done();
})
.error(function (data, status, headers, config) {
NProgress.done();
$("div.failure").text("Unable to retrieve Request Type");
$("div.failure").fadeIn(300).delay(1500).fadeOut(400);
});
};
$scope.GetEditData = function () {
$http.get('/Master_Subledger_Category/GetEditData')
.success(function (data, status, headers, config) {
debugger;
$scope.SubLedgerCategoryModel = data;
console.log(data);
})
.error(function (data, status, headers, config) {
NProgress.done();
$("div.failure").text("Retrive Failure");
$("div.failure").fadeIn(300).delay(1500).fadeOut(400);
});
};
$scope.InsertSubledgerCategory = function () {
NProgress.start();
var Request_Type = $("#Master_Subledger_Category").val();
var Url_Master_Subledger;
if (Request_Type == "Create") {
Url_Master_Subledger = "/Master_Subledger_Category/Create_Master_Subledger_Category_Ajax";
}
else {
Url_Master_Subledger = "/Master_Subledger_Category/Test";
}
$http({
method: 'POST',
url: Url_Master_Subledger,
data: $scope.SubLedgerCategoryModel
}).success(function (data, status, headers, config) {
if (data.success === true) {
NProgress.done();
$("div.success").text("Successfully Created");
$("div.success").fadeIn(300).delay(1500).fadeOut(800);
$scope.SubLedgerCategoryModel = {};
console.log(data);
}
else {
NProgress.done();
$("div.failure").text("Saveing Failure");
$("div.failure").fadeIn(300).delay(1500).fadeOut(400);
}
}).error(function (data, status, headers, config) {
NProgress.done();
$("div.failure").text("Saveing Failure");
$("div.failure").fadeIn(300).delay(1500).fadeOut(400);
console.log($scope.message);
});
};
})
.config(function ($locationProvider, $sceProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$sceProvider.enabled(false);
});
})(angular);
Here is the HTML:
<div class="form-horizontal" ng-app="Sub_Ledger_Category_Create_app">
<div class="box-body" ng-controller="Sub_Ledger_Category_Create_ctrl">
<div class="form-group">
<label for="txt_Master_Subledger_Category_Name" class="col-sm-2 control-label">Sub Ledger Category</label>
<div class="col-sm-10">
<input class="form-control" ng-model="SubLedgerCategoryModel.Sub_Ledger_Cat_Name" id="txt_Master_Subledger_Category_Name" name="txt_Master_Subledger_Category_Name" autofocus placeholder="Sub Ledger Category">
<input ng-model="SubLedgerCategoryModel.Sub_Ledger_Cat_ID" name="txt_Master_Subledger_Category_ID" id="txt_Master_Subledger_Category_ID" hidden />
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<button type="submit" value="Save" ng-click="InsertSubledgerCategory()" class="btn btn-info pull-right">Save</button>
<div class="text-red alert-box failure pull-right margin-r-5"></div>
<div class="text-green alert-box success pull-right margin-r-5"></div>
</div>
<!-- /.box-footer -->
</div>
</div>
Unfortunately I am unable to populate the view but in Console log I am able to view the data, helpful if anybody and help me.

AngularJs prevents loading HTML in this way by default. You might be getting an error on browser console: attempting to use an unsafe value in a safe context.
This is due to Angular's Strict Contextual Escaping (SCE) mode (enabled by default). Have a look to this for more information.
To resolve this issue you have 2 solutions:
$sce
$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);
ngSanitize: include the angular-sanitize.min.js resource and add the dependency in module.
hope this will help.

I have only changed the following
scope.SubLedgerCategoryModel = data;
to
scope.SubLedgerCategoryModel = data[0]:
and its resolved my issue.

How to display single row in ng-repeat, in Angularjs

I am very new to AngularJs and trying to use it in my project. I made a WebApi function that returns a city's current temperature. From html, I want to get that single temperature and display it. I know ng-repeat is used to display many items but how to display a single item.
my current code is below. I expected to display "20" as temperature, but it displays "2" and "0" in two rows :) Please help. How can I display it as "20" in a single row?
<div ng-controller="WearherController">
<table ng-repeat="weather in weathers" border="1">
<tr>
<td>{{weather}}</td>
</tr>
</table>
</div>
....
....
....
<script>
var app = angular.module("ZenHaberApp", []);
app.controller("WeatherController", function ($scope, $http) {
var city = 'Adana';
$http.get('http://localhost:62747/api/getweatherbycityname/' + city).
success(function (data, status, headers, config) {
$scope.weathers = data.condition_temp;
}).
error(function (data, status, headers, config) {
alert("error");
});
});
</script>
I think #Sajeetharan gave me the solution but now it displays a silly image. What is it? How can I fix this?
here is the rest of the code
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script>
var app = angular.module("ZenHaberApp", []);
app.controller("WeatherController", function ($scope, $http) {
var city = 'Adana';
$http.get('http://localhost:62747/api/getweatherbycityname/' + city).
success(function (data, status, headers, config) {
$scope.weathers = data.condition_temp;
}).
error(function (data, status, headers, config) {
alert("error");
});
});
</script>
SOLUTION:
thanks to #Sajeetharan, he found out the problem. It was {{weather}}
It should be {{weathers}}

You can directly assign the $scope variable weathers,
<table border="1">
<tr>
<td>{{weathers}}</td>
</tr>
</table>
DEMO

AngularJS code not working after ng-repeat

I have a page where we get a list of users using angular $http from backend as shown below.
myApp.controller("MyCntrl", function ($scope, $http) {
$scope.users= [];
$scope.countries = function () {
$http.get(url).success(function (data, status, headers, config) {
return data;
});
};
$scope.getUsers = function () {
$http.get(url).success(function (data, status, headers, config) {
$scope.users= data;
});
};
});
And my html is like:
<div ng-app="myApp" ng-controller="MyCntrl" ng-init="getUsers()">
<p ng-repeat="user in users">{{user.UserName}}</p>
<select>
<option ng-repeat="country in countries">{{country.CountryName}}</option>
</select>
</div>
Everything is working fine up to displaying users.
But the code after ng-repeat of users is not working. I'm not able to see the list of countries in the dropdown.
I can see the json list of both users and countries in firebug.
Can anyone help me on this?
My countries Json is
[{CountryId:1,CountryName:"India"}]
What i've observed is that the angular code is not working after the first ng-repeat of users.
When i try to see the length of countries json like
<p>{{countries.length}}</p>
It is just printing {{countries.length}} in browser

You can set the returned data for $scope.countries just as you've done for $scope.users, except you don't need to define a function that you'd call in your view to get all the countries.
Instead, call this function in your controller which in turn will set the countries variable into the scope:
this.getCountries = function () {
$http.get(url).success(function (data, status, headers, config) {
$scope.countries = data;
});
};
// call the method to get the countries
this.getCountries();
Note that in your code you have return = data which might be causing a syntax error.

You will have to use ng-options instead in the case of <select>:
<select ng-model="selectedCountry" ng-options="country.countryName for country in countriesData">
</select>
Edit:
Replace this:
$scope.countries = function () {
$http.get(url).success(function (data, status, headers, config) {
return data;
});
};
By this:
$http.get(url).success(function (data, status, headers, config) {
$scope.countriesData = data;
});
NOTE: Checked that url is defined !

You have call function in ng-repeat that's why its not working properly.Correct code should be like below
myApp.controller("MyCntrl", function ($scope, $http) {
$scope.users= [];
$scope.getCountry = function () {
$http.get(url).success(function (data, status, headers, config) {
$scope.countries = data;
});
};
$scope.getUsers = function () {
$http.get(url).success(function (data, status, headers, config) {
$scope.users= data;
$scope.getCountry();
});
};
});

AngularJS - Some dynamic contents loads very late

I have an Angular JS application in which some dynamic rows of data are loaded through a rest API. This section of html data are loaded very late after the whole page is loaded and hence looks bad.
HTML
<div class="row">
<div class="form-group" ng-repeat="rows1 in entity.pageSection1Rows">
<!-- Around five html columns -->
<!-- The CONTENTS here loads very late after the whole page is loaded -->
</div>
</div>
<div class="row">
<div class="form-group" ng-repeat="rows2 in entity.pageSection2Rows">
<!-- Around five html columns -->
<!-- The CONTENTS here loads very late after the whole page is loaded -->
</div>
</div>
Javascript
myApp.controller('createController', function($scope, $http, $location) {
$scope.entity = {};
$http.get("/restapi/serviceA")
.success(function(data, status, headers, config) {
$scope.entity.pageSection1Rows = data;
});
$http.get("/restapi/serviceB")
.success(function(data, status, headers, config) {
$scope.entity.pageSection2Rows = data;
});
// Rest APIs to load data for drop downs
$http.get("/restapi/dropdown1")
.success(function(data, status, headers, config) {
$scope.dropdown1 = data;
});
$http.get("/restapi/dropdown2")
.success(function(data, status, headers, config) {
$scope.dropdown2 = data;
});
$http.get("/restapi/dropdown3")
.success(function(data, status, headers, config) {
$scope.dropdown3 = data;
});
$http.get("/restapi/dropdown4")
.success(function(data, status, headers, config) {
$scope.dropdown4 = data;
});
$scope.add = function() {
$http.post("/restapi/entity", $scope.entity).success(function(data, status, headers, config, statusText) {
$location.path('/home');
}).error(function(data, status, headers, config, statusText) {
console.log("Error : " +statusText);
});
}
})

Pass ng-data to scope

I'm trying to create a live search function with AngularJS. I got a input field:
<input type="text" placeholder="Search" data-ng-model="title" class="search">
it there away to pass the search keyword inside the scope so i can perform a live search (JS) and display the results directly to the DOM
var app = angular.module("DB", []);
app.controller("Controller", function($scope, $http) {
$scope.details = [],
$http.defaults.headers.common["Accept"] = "application/json";
$http.get('http://api.org/search?query=<need to pass search name here>&api_key=').
success(function(data, status, headers, config) {
}).
error(function(data, status, headers, config) {
//handle errors
});
});

Inside the angular controller use a watch expression.
$scope.$watch('title', function (newValue, oldValue) {
if(newValue != oldValue) {
$http.get('http://api.org/search?query=' + newValue + '&api_key=')
.success(function(data, status, headers, config) { /* Your Code */ })
.error(function(data, status, headers, config) { /* Your Code */ });
}
});

You can use watch as #Justin John proposed, or can use ng-change
when using ng-change your controller should look something like this
app.controller("Controller", function($scope, $http) {
$http.defaults.headers.common["Accept"] = "application/json"; //should be moved to run block of your app
$scope.details = [];
$scope.search= function() {
$http.get("http://api.org/search?query="+$scope.title+"&api_key=")
.success(function(data, status, headers, config) { .... })
.error(function(data, status, headers, config) {//handle errors });
}
});
and your html
<input type="text" placeholder="Search" data-ng-model="title" class="search" data-ng-change="search()">

<input type="text" placeholder="Search" data-ng-model="title" class="search" data-ng-change="search()">
app.controller("Controller", function($scope, $http) {
$scope.details = [],
$scope.search= function() {
var url = "http://api.org/search?query="+$scope.title+"&api_key=";
$http.defaults.headers.common["Accept"] = "application/json";
$http.get(url).
success(function(data, status, headers, config) {
}).
error(function(data, status, headers, config) {
//handle errors
});
};
});