gpt4 book ai didi

javascript - Angular 指令 ng-model 适用于数组,但不适用于字符串

转载 作者:行者123 更新时间:2023-12-03 03:03:26 25 4
gpt4 key购买 nike

ng-model 指令似乎缺少对 JavaScript 中实际对象的引用,但仅限于字符串值。使用字典对象列表并使用 ng-repeat 循环元素,如下所示,它可以工作。

我只能认为这可能是由于返回数组的行为就像返回对象的引用,而返回字符串变量只是返回文字字符串,从而抵消了 Angular 进行双向数据绑定(bind)的能力,并且留给我的变量仍然保留着未定义的值。

为什么我的下面的服务模块无法从变量 gitRelease 的 View 中提取更新的值?

在服务模块中我有此功能:

(function () { //start iife

'use strict';

angular.module('gms.autoDeploy')
.factory('AutoDeployService', ["$http", "$q", "$log", "$cookies", "APP_CONFIGS", "SweetAlert", "$timeout", "GridSettingsService", "APP_USER", AutoDeployService]);

function AutoDeployService($http, $q, $log, $cookies, APP_CONFIGS, $timeout, SweetAlert, GridSettingsService, APP_USER) {

var tibcoCopyJobs = [];
var gitRelease = "";

function addNewTibcoCopyJob() {
tibcoCopyJobs.push({
sourceServer: "",
sourcePath: "",
destinationServer: "",
destinationPath: ""
});
}

function getTibcoCopyJobs() { return tibcoCopyJobs; }
function getGitRelease(){ return gitRelease; }

function extractFormData() {
console.log(gitRelease);
for (var i = 0; i < tibcoCopyJobs.length; i++) {
console.log(tibcoCopyJobs[i]);
}
}

return {
addNewTibcoCopyJob: addNewTibcoCopyJob,
getTibcoCopyJobs: getTibcoCopyJobs,
getGitRelease: getGitRelease,
extractFormData: extractFormData
};
} //end AutoDeployService
}()); //end iife

与此 Controller 一起使用:

angular.module("gms.autoDeploy").controller('AutoDeployController', ['$scope', '$compile', 'AutoDeployService',
function ($scope, $compile, AutoDeployService) {

var model = this;

init();

function init() {
model.tibcoCopyJobs = AutoDeployService.getTibcoCopyJobs();
model.gitRelease = AutoDeployService.getGitRelease();
}

function btn_addNewTibcoCopy() { AutoDeployService.addNewTibcoCopyJob(); }

function btn_extractFormData() { AutoDeployService.extractFormData(); }

model.btn_addNewTibcoCopy = btn_addNewTibcoCopy;
model.btn_extractFormData = btn_extractFormData;
}
]);

要为该 View 提供功能:

<div ng-controller="AutoDeployController as autoDeploy">
<div class="container-fluid">

<div class="row">
<div class="col-md-2">
<input type="text" class="form-control" ng-model="autoDeploy.gitRelease" placeholder="MM-DD-YYYY">
</div>
</div>

<div class="row">
<fieldset class="col-md-2" style="margin-bottom: 10px" ng-repeat="item in autoDeploy.tibcoCopyJobs track by $index">
<legend>Copy</legend>

<input type="text" class="form-control" placeholder="Source Server..." ng-model="item.sourceServer">
<br/>
<input type="text" class="form-control" placeholder="Source Path..." ng-model="item.sourcePath">
<br/>
<input type="text" class="form-control" placeholder="Destination Server..." ng-model="item.destinationServer">
<br/>
<input type="text" class="form-control" placeholder="Destination Path..." ng-model="item.destinationPath">
</fieldset>
</div>

<button ng-click="autoDeploy.btn_extractFormData()">extract</button>
<button ng-click="autoDeploy.btn_addNewTibcoCopy()">TIBCO copy</button>
</div>
</div>

最佳答案

我认为您已经在问题中解释了原因。数组是通过引用返回的,而字符串只是通过值复制。但我会尽力让它更清楚一点。

当你这样做

model.gitRelease = AutoDeployService.getGitRelease();

模型对象将像这样创建属性 getRelease:

{getRelease: "", ... (more properties from the ctrl)}

因此,无论您在 View 中更新什么,它都只会更新 Controller 中的 getRelease 。

一个可能的修复方法就像 Jags 在评论中提到的那样。

或者您可以在 ctrl 中引用您的服务

var model = this;
model.autoDeployService = AutoDeployService;

在你看来

<input type="text" class="form-control" ng-model="autoDeploy.autoDeployService.gitRelease" placeholder="MM-DD-YYYY">

应该可以。

关于javascript - Angular 指令 ng-model 适用于数组,但不适用于字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47273553/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com