Question

我想在接收其他输入值的输入上使用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>

Answer 1

这是一个有效的Plunker。

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

<body ng-app="BottomApp">

并从createSeoUrl中删除了字符串变量声明。

编辑：我认为你不能在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">

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

1 个答案: