AngularJS中的数组未拾取字符串值
Posted
技术标签:
【中文标题】AngularJS中的数组未拾取字符串值【英文标题】：String values not being picked up by array in AngularJS 【发布时间】：2016-09-02 20:40:01 【问题描述】：我目前正在从事一个会计项目，但遇到了一个愚蠢的问题。 我在文本框中输入值，然后单击“添加人员”按钮，添加了值，但是当我单击“保存到数据库”按钮时，多个添加的值被推送到数据库中。我能够在数据库中插入多个值，但无法将 SQL 服务器中的多个条目再次调用回我的 UI。
我的 SQL Server 表中有多个相同的名字，我想提取所有具有相同名字的值并将它们填充到我用角度代码定义的 $scope.arr 中。
当我在 $scope.GetPerson() 方法中传递一个整数值时，我得到了所需的结果，并且我的数组 ($scope.arr) 被填充了具有相同 CustomerCode 的所有值，但是当我传递一个字符串值时即，在 GetPerson 方法中，我的数组 ($scope.arr) 没有填充与放入数据库中的相同名字值。 我希望专家们调查一下这个问题并指导我到底在哪里犯了错误。`
我的模特：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace TestProj.Models
public class TestModel
public int ID get; set;
public int CustomerCode get; set;
public string FirstName get; set;
public string LastName get; set;
public decimal Debit get; set;
public decimal Credit get; set;
我的 Angular JS 脚本：
var app = angular.module("TestApp", []);
app.controller("TestCtrl", function ($scope, TestService)
$scope.arr = [];
GetAllPers();
function GetAllPers()
var getPersData = TestService.getPersons();
getPersData.then(function (Persons)
$scope.persons = Persons.data;
, function ()
alert('Error in getting Person records');
);
$scope.addPerson = function ()
var obj =
CustomerCode: $scope.customercode,
FirstName: $scope.firstname,
LastName: $scope.lastname,
Debit: $scope.debit,
Credit: $scope.credit,
;
$scope.arr.push(obj);
;
$scope.savePerson = function ()
var TestData = TestService.AddPer($scope.arr);
TestData.then(function (msg)
$scope.customercode = "";
$scope.firstname = "";
$scope.lastname = "";
$scope.debit = "";
$scope.credit = "";
GetAllPers();
alert(msg.data);
for (var i = 0; i < $scope.arr.length; i++)
$scope.arr.pop();
, function ()
alert('Error In Adding Person');
);
;
$scope.GetPerson = function (test)
var getTestData = TestService.getPers(test.FirstName);
getTestData.then(function (_test)
$scope.arr = _test.data;
, function ()
alert('Error in getting person records');
);
);
app.service("TestService", function ($http)
this.getPersons = function ()
return $http.get("/Test/GetAllPers");
this.AddPer = function (person)
var response = $http(
method: "post",
url: "/Test/AddPerson",
data: JSON.stringify(person),
dataType: "json",
);
console.log(response);
return response;
this.getPers = function (persname)
var response = $http(
method: "post",
url: "/Test/GetPersonByFName",
params:
firstname: JSON.stringify(persname)
);
return response;
);
我的 C# 控制器：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TestProj.Models;
namespace TestProj.Controllers
public class TestController : Controller
TestContext dc = new TestContext();
// GET: Test
public ActionResult Index()
return View();
public JsonResult GetAllPers()
var personList = dc.TestModels.ToList();
return Json(personList, JsonRequestBehavior.AllowGet);
public JsonResult GetPersonByFName(string firstname)
var q = (from ab in dc.TestModels.Where(b => b.FirstName == firstname) select ab);
return Json(q, JsonRequestBehavior.AllowGet);
[HttpPost]
public string AddPerson(List<TestModel> test)
bool val = false;
foreach (var t in test)
if (t != null)
dc.TestModels.Add(t);
val = true;
else
val = false;
dc.SaveChanges(); //save context at the end, when no error occurs
if (val == true)
return "Success";
else
return "Failed";
我的 html：
@
ViewBag.Title = "Index";
<h2>Index</h2>
<div ng-controller="TestCtrl">
<form>
<button class="btn" data-toggle="modal" data-target="#myModal">Show records</button><br />
Customer Code: <input class="form-control" ng-model="customercode" /><br />
FirstName: <input class="form-control" ng-model="firstname" /><br />
LastName: <input class="form-control" ng-model="lastname" /><br />
Debit: <input class="form-control" ng-model="debit" /><br />
Credit: <input class="form-control" ng-model="credit" /><br />
<button class="btn btn-success" ng-click="addPerson()">Add Person</button>
<button class="btn btn-success" ng-click="savePerson()">Save To DB</button>
@*Table for showing pushed values*@
<table class="table table-bordered">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Debit</th>
<th>Credit</th>
</tr>
<tr ng-repeat="a in arr">
<td>a.CustomerCode</td>
<td>a.FirstName</td>
<td>a.LastName</td>
<td>a.Debit</td>
<td>a.Credit</td>
</tr>
</table>
@*Modal popup*@
<div class="modal fade" role="dialog" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Persons</h4>
</div>
<div class="modal-body">
<label class="control-label col-md-2" style="width: auto">Search:</label>
<div class="col-md-8">
<input class="form-control" ng-model="searchfor" />
</div><br />
<table class="table table-hover">
<tr>
<td><b>First Name</b></td>
<td><b>Last Name</b></td>
<td><b>Debit</b></td>
<td><b>Credit</b></td>
<td><b>Select</b></td>
</tr>
<tr ng-repeat="b in persons | filter:searchfor ">
<td>b.CustomerCode</td>
<td>b.FirstName</td>
<td>b.LastName</td>
<td>b.Debit</td>
<td>b.Credit</td>
<td>
<button type="button" class="btn btn-success" ng-click="GetPerson(b)" data-dismiss="modal">Select</button>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Okay</button>
</div>
</div>
</div>
</div><br />
</form>
</div>
<script src="~/Scripts/MyAngular/Module.js"></script>
【问题讨论】：
检查您的开发工具网络选项卡，看看您是否传递了正确的值（firatName） 我在 VS2015 中调试了每一行，最后 GetPersonByFName 方法中的 linq 查询（var q）返回格式“\”Rehan\“”的名字。当我将其更改为“Rehan”时，它运行良好。我不知道为什么会这样。 【参考方案1】：问题在于您的getPers()。添加JSON.stringfy() 会将" 添加到您的字符串中。
应该这样使用：
this.getPers = function (persname)
var response = $http(
method: "post",
url: "/Test/GetPersonByFName",
params:
firstname: persname
);
return response;
【讨论】：
谢谢你！这解决了问题。我在服务器端代码中所做的，即我的 GetPersonByFName 方法是这样的： string fn = firstname; f = f.Replace("\"", ""); var q = db.VM.Where(b => b.FirstName == f); 这也解决了我的问题:) 无论如何谢谢你的代码也在运行！以上是关于AngularJS中的数组未拾取字符串值的主要内容，如果未能解决你的问题，请参考以下文章
Angularjs模板默认值，如果绑定空/未定义（使用过滤器）
AngularJS（前端）和 Laravel（后端）中 JSON/数组中的 NULL