AngularJS 使用 ng-repeat 时无法使用 ng-model 获取值
AngularJS cannot grab values with ng-model while using ng-repeat
我正在尝试使用 ng-model 获取动态创建的信息(使用 ng-repeat 创建的信息)。我这样做是为了将对象形式的信息发送到我的平面数据库 Firebase。不幸的是,ng-model 只抓取“”(空字符串)作为我的值。有什么建议吗?
/////////// Controller below
// Bookmark object
$scope.bookmark = {
url: "",
illnessName: "",
symptom: ""
};
// Save illness card to bookmarks
$scope.saveToBookmarks = ($bookmark) => {
console.log($bookmark);
if ($scope.bookmark.illnessName === ""){
alert("Hey, quit that NAME!");
return;
}
if ($scope.bookmark.symptom === ""){
alert("Hey, quit that SYMPTOM!");
return;
}
if ($scope.bookmark.url === ""){
alert("Hey, quit that URL!");
return;
}
BookmarksFactory.addUserBookmark({
url: $scope.bookmark.url,
illnessName: $scope.bookmark.illnessName,
symptom: $scope.bookmark.symptom
});
console.log("$scope.bookmark.url :", $scope.bookmark.url);
};
///////// Factory below
"use strict";
app.factory("BookmarksFactory", function(FBCreds, $q, $http) {
var addUserBookmark = (newBookmark) =>{
console.log("Factory is working!");
return $q( (resolve, reject) => {
$http.post(`${FBCreds.databaseURL}/bookmarks.json`,
JSON.stringify(newBookmark))
.then( (FBObj) => {
resolve(FBObj);
})
.catch( (error) => {
reject(error);
});
});
};
return {
addUserBookmark
};
});
<!-- This will be search results populate -->
<div class="search-results" >
<div class="row">
<div class="col-lg-4 text-center search-card box" ng-repeat="illness in illnesses | filter: searchText.search">
<!-- Insert search results here -->
<div class="inner ">
<div class="card">
<button type="button" class="close close-card" aria-label="Close" ng-click="removeCard($event)">
<span class="close-card-x" aria-hidden="true">×</span>
</button>
<img class="card-img-top" src="{{illness.url}}" alt="Card image cap" ng-model="bookmark.url">
<div class="card-block">
<h4 class="card-title" ng-model="bookmark.illnessName">{{illness.illnessName}}</h4>
<p class="card-text" ng-model="bookmark.symptom">{{illness.symptom}}</p>
<button class="btn btn-primary" ng-click="saveToBookmarks(bookmark)">Save</button>
<a href="#!/edit-illness/{{illness.id}}"><button class="btn btn-success" ng-click="goToEditPage()">Edit</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
改为$scope.bookmark ={};
并使用 http 获取您编写的数据文件,我的示例是 test.php
$http(){
method:'POST',
url:'test.php',
data : $.param($scope.bookmark),
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(success)
function success(){
////
}
我正在尝试使用 ng-model 获取动态创建的信息(使用 ng-repeat 创建的信息)。我这样做是为了将对象形式的信息发送到我的平面数据库 Firebase。不幸的是,ng-model 只抓取“”(空字符串)作为我的值。有什么建议吗?
/////////// Controller below
// Bookmark object
$scope.bookmark = {
url: "",
illnessName: "",
symptom: ""
};
// Save illness card to bookmarks
$scope.saveToBookmarks = ($bookmark) => {
console.log($bookmark);
if ($scope.bookmark.illnessName === ""){
alert("Hey, quit that NAME!");
return;
}
if ($scope.bookmark.symptom === ""){
alert("Hey, quit that SYMPTOM!");
return;
}
if ($scope.bookmark.url === ""){
alert("Hey, quit that URL!");
return;
}
BookmarksFactory.addUserBookmark({
url: $scope.bookmark.url,
illnessName: $scope.bookmark.illnessName,
symptom: $scope.bookmark.symptom
});
console.log("$scope.bookmark.url :", $scope.bookmark.url);
};
///////// Factory below
"use strict";
app.factory("BookmarksFactory", function(FBCreds, $q, $http) {
var addUserBookmark = (newBookmark) =>{
console.log("Factory is working!");
return $q( (resolve, reject) => {
$http.post(`${FBCreds.databaseURL}/bookmarks.json`,
JSON.stringify(newBookmark))
.then( (FBObj) => {
resolve(FBObj);
})
.catch( (error) => {
reject(error);
});
});
};
return {
addUserBookmark
};
});
<!-- This will be search results populate -->
<div class="search-results" >
<div class="row">
<div class="col-lg-4 text-center search-card box" ng-repeat="illness in illnesses | filter: searchText.search">
<!-- Insert search results here -->
<div class="inner ">
<div class="card">
<button type="button" class="close close-card" aria-label="Close" ng-click="removeCard($event)">
<span class="close-card-x" aria-hidden="true">×</span>
</button>
<img class="card-img-top" src="{{illness.url}}" alt="Card image cap" ng-model="bookmark.url">
<div class="card-block">
<h4 class="card-title" ng-model="bookmark.illnessName">{{illness.illnessName}}</h4>
<p class="card-text" ng-model="bookmark.symptom">{{illness.symptom}}</p>
<button class="btn btn-primary" ng-click="saveToBookmarks(bookmark)">Save</button>
<a href="#!/edit-illness/{{illness.id}}"><button class="btn btn-success" ng-click="goToEditPage()">Edit</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
改为$scope.bookmark ={};
并使用 http 获取您编写的数据文件,我的示例是 test.php
$http(){
method:'POST',
url:'test.php',
data : $.param($scope.bookmark),
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(success)
function success(){
////
}