在两个输入上使用 ng-model，值相同

我想在接收其他输入值的输入上使用 ng-model ...

我的代码不起作用，我不明白为什么，是否可以将 ng-model 设置为具有 Angular 值的输入？

我的代码

var BottomApp = angular.module('BottomApp', []);
BottomApp.controller('SeoArticle', ['$scope', function($scope) {
  $scope.seoTitle = document.getElementById('title').value;
  $scope.createSeoUrl = function(string){
    var string;
    string = string.replace(/'+/g, '');
    string = string.replace(/"+/g, '');
    return string.replace(/s+/g, '-');
  };
}]);

<div ng-controller="SeoArticle">
<input type="text" id="title" name="article[title]" class="form-control" placeholder="title" ng-model="seoTitle">
<input type="text" name="article[seo_title]" value="{{seoTitle2}}">
<input type="text" name="article[seo_url]" value="{{seoUrl2}}">
<div class="ui-block-title"><h5>{{seoTitle}}</h5></div>
<input type="text" id="title" class="form-control" placeholder="title" value="{{seoTitle}}" ng-model="seoTitle2">
<input type="text" id="seo_url" class="form-control" placeholder="seo_url" value="{{createSeoUrl(seoTitle)}}" ng-model="seoUrl2">
<div class="panel">
  <div class="seo-overview">
    <p class="seo-overview-title">{{seoTitle}}</p>
    <p class="seo-overview-url">{{createSeoUrl(seoTitle)}}</p>
  </div>
</div>
</div>

：

这是一个工作的 Plunker。

我已将 ng-app 调用添加到正文标签中

<body ng-app="BottomApp">

并从创建SeoUrl中删除了字符串变量声明。

编辑：我认为你不能在DOM内做到这一点。您应该使用观察程序。请参阅更新的 Plunker。

$scope.$watch("seoTitle", function(newValue) {
    $scope.seoTitle2 = newValue;
    $scope.seoUrl2 = $scope.createSeoUrl(newValue);
})
<input type="text" id="title" class="form-control" placeholder="title" ng-model="seoTitle2">
<input type="text" id="seo_url" class="form-control" placeholder="seo_url" ng-model="seoUrl2">

相关内容

最新更新

热门标签：