AngularJS - Bir ng-modeli kullanıldığında, giriş metin kutusundaki değer özelliği yok sayılıyor mu?

Aşağıdaki "bob" gibi bir şeye basit bir giriş metin kutusu değeri ayarladıysam AngularJS kullanarak. ng-modelÖzellik eklenirse değer görüntülenmez .

    <input type="text"
           id="rootFolder"
           ng-model="rootFolders"
           disabled="disabled"
           value="Bob"
           size="40"/>

Herkes bu girdi bir şey varsayılan ve tutmak için basit bir çalışma biliyor musunuz ng-model? ng-bindVarsayılan değeri olan bir kullanmaya çalıştım ama bu da işe yaramıyor gibi görünüyor.

İstenilen davranış budur, modeli görünümde değil, denetleyicide tanımlamanız gerekir.

<div ng-controller="Main">
  <input type="text" ng-model="rootFolders">
</div>


function Main($scope) {
  $scope.rootFolders = 'bob';
}

Vojta "Açısal yolu" tanımladı, ancak bu işi gerçekten yapmanız gerekiyorsa, @urbanek yakın zamanda ng-init kullanarak bir geçici çözüm gönderdi:

<input type="text" ng-model="rootFolders" ng-init="rootFolders='Bob'" value="Bob">

https://groups.google.com/d/msg/angular/Hn3eztNHFXw/wk3HyOl9fhcJ

Giriş yönergesini geçersiz kılmak işi yapıyor gibi görünüyor. Dan Hunsaker'in kodunda bazı küçük değişiklikler yaptım :

• Kullanmaya çalışmadan önce ngModel için bir kontrol eklendi $parse().assign()Bir ngModel özelliği olmayan alanlarda .
• assign()Fonksiyon parametresi sırası düzeltildi .

app.directive('input', function ($parse) {
  return {
    restrict: 'E',
    require: '?ngModel',
    link: function (scope, element, attrs) {
      if (attrs.ngModel && attrs.value) {
        $parse(attrs.ngModel).assign(scope, attrs.value);
      }
    }
  };
});

Açısal yol

Bunu yapmanın doğru Açısal yolu, tek bir sayfa uygulaması, AJAX form şablonuna yazmak ve sonra modelden dinamik olarak doldurmaktır. Model varsayılan olarak formdan doldurulmaz, çünkü model tek hakikat kaynağıdır. Bunun yerine Angular diğer yöne gidecek ve formu modelden doldurmaya çalışacaktır.

Ancak, baştan başlamak için zamanınız yoksa

Yazılı bir uygulamanız varsa, bu oldukça ağır mimari değişiklikler içerebilir. Angular'ı tek bir sayfanın tamamını sıfırdan oluşturmak yerine mevcut bir formu geliştirmek için Angular'ı kullanmaya çalışıyorsanız, değeri bir yönerge kullanarak formdan alabilir ve bağlantı zamanında kapsamda saklayabilirsiniz. Açısal, kapsamdaki değeri forma geri bağlar ve senkronize tutar.

Direktif kullanma

Değeri formdan çekmek ve geçerli kapsama yüklemek için nispeten basit bir yönerge kullanabilirsiniz. Burada bir initFromForm yönergesi tanımladım.

var myApp = angular.module("myApp", ['initFromForm']);

angular.module('initFromForm', [])
  .directive("initFromForm", function ($parse) {
    return {
      link: function (scope, element, attrs) {
        var attr = attrs.initFromForm || attrs.ngModel || element.attrs('name'),
        val = attrs.value;
        if (attrs.type === "number") {val = parseInt(val)}
        $parse(attr).assign(scope, val);
      }
    };
  });

Bir model adı almak için birkaç yedek tanımladığımı görebilirsiniz. Bu yönergeyi ngModel yönergesi ile birlikte kullanabilir veya isterseniz $ scope dışında bir şeye bağlayabilirsiniz.

Şöyle kullanın:

<input name="test" ng-model="toaster.test" value="hello" init-from-form />
{{toaster.test}}

Bunun textareas ile çalışacağını ve açılır menüleri seçeceğini unutmayın.

<textarea name="test" ng-model="toaster.test" init-from-form>hello</textarea>
{{toaster.test}}

Güncelleme: Orijinal yanıtım, denetleyicinin HTML lehine Açısal kuralları ihlal eden DOM bilinçli kod içermesini içeriyordu. @dmackerman cevabımla ilgili bir yorumda direktiflerden bahsetti ve şimdiye kadar bunu tamamen özledim. Bu girişle, Açısal veya HTML kurallarını bozmadan bunu yapmanın doğru yolu şudur :

Her ikisini de almanın bir yolu vardır - öğenin değerini alın ve bunu bir yönergede modeli güncellemek için kullanın:

<div ng-controller="Main">
    <input type="text" id="rootFolder" ng-model="rootFolders" disabled="disabled" value="Bob" size="40" />
</div>

ve sonra:

app.directive('input', ['$parse', function ($parse) {
    return {
        restrict: 'E',
        require: '?ngModel',
        link: function (scope, element, attrs) {
            if(attrs.value) {
                $parse(attrs.ngModel).assign(scope, attrs.value);
            }
        }
    };
}]);

Elbette yukarıdaki yönergeyi value, modeli değerine ayarlamadan önce öznitelikle daha fazlasını yapmak için $parse(attrs.value, scope), valueözniteliği Açısal ifade olarak ele almak için kullanma da dahil olmak üzere değiştirebilirsiniz (bunun için muhtemelen farklı bir [özel] öznitelik kullanacağım) böylece standart HTML özellikleri tutarlı olarak sabit olarak değerlendirilir).

Ayrıca, ilgi çekici olabilecek ng-modeline uygun verilerin sunulması konusunda da benzer bir soru vardır .

AngularJs ngModel yönergesini kullanıyorsanız, valueöznitelik değerinin ngModel alanına bağlanmadığını unutmayın. Bunu kendiniz başlatmanız ve bunu yapmanın en iyi yolu,

<input type="text"
       id="rootFolder"
       ng-init="rootFolders = 'Bob'"
       ng-model="rootFolders"
       disabled="disabled"
       value="Bob"
       size="40"/>

Bu, önceki cevaplarda küçük bir değişikliktir ...

$ Ayrışmasına gerek yok

angular.directive('input', [function () {
  'use strict';

  var directiveDefinitionObject = {
    restrict: 'E',
    require: '?ngModel',
    link: function postLink(scope, iElement, iAttrs, ngModelController) {
      if (iAttrs.value && ngModelController) {
        ngModelController.$setViewValue(iAttrs.value);
      }
    }
  };

  return directiveDefinitionObject;
}]);

Merhaba modeli başlatmak ile aşağıdaki yöntemleri deneyebilirsiniz.

Burada metin kutusunun ng-modelini iki şekilde başlatabilirsiniz

- ng-init kullanımı ile

- js'de $ scope kullanımı ile

<!doctype html>
 <html >
 <head>
        <title>Angular js initalize with ng-init and scope</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-app="app" >
    <h3>Initialize value with ng-init</h3>
    <!-- Initlialize model values with ng-init -->
    <div ng-init="user={fullname:'Bhaskar Bhatt',email:'bhatt.bhaskar88@gmail.com',address:'Ahmedabad'};">
        Name : <input type="text" ng-model="user.fullname" /><br/>
        Email : <input type="text" ng-model="user.email" /><br/>
        Address:<input type="text" ng-model="user.address" /><br/>

    </div>  
    <!-- initialize with js controller scope -->
    <h3>Initialize with js controller</h3>

    <div  ng-controller="alpha">
        Age:<input type="text" name="age" ng-model="user.age" /><br/>
        Experience : <input type="text" name="experience" ng-model="user.exp" /><br/>
        Skills : <input type="text" name="skills" ng-model="user.skills" /><br/>
    </div>  

</body> 
<script type="text/javascript">
        angular.module("app",[])
        .controller("alpha",function($scope){
            $scope.user={};
            $scope.user.age=27;
            $scope.user.exp="4+ years";
            $scope.user.skills="Php,javascript,Jquery,Ajax,Mysql";
        });

     </script>
 </html>                

Sorun, ng-modelini, ng-değerini / değerini ayarlamak istediğiniz yere üst öğeye ayarlamanız gerektiğidir. Angular tarafından belirtildiği gibi:

Temel olarak giriş [radyo] ve seçenek öğelerinde kullanılır, böylece öğe seçildiğinde, o öğenin ngModel'i (veya seçili üst öğe) bağlı değere ayarlanır.

Örn: Bu yürütülen bir koddur:

<div class="col-xs-12 select-checkbox" >
<label style="width: 18em;" ng-model="vm.settingsObj.MarketPeers">
  <input name="radioClick" type="radio"  ng-click="vm.setPeerGrp('market');" 
         ng-value="vm.settingsObj.MarketPeers" 
         style="position:absolute;margin-left: 9px;">
  <div style="margin-left: 35px;color: #717171e8;border-bottom: 0.5px solid #e2e2e2;padding-bottom: 2%;">Hello World</div>
</label>
</div>

Not: Yukarıdaki durumda ben ng-model ve değeri JSON yanıtı alreday sadece JS nesnesi "MarketPeers" olarak başka bir özellik ekliyorum. Bu nedenle model ve değer ihtiyaca göre değişebilir, ancak bence bu işlem hem ng-model hem de değere sahip olmak için aynı öğeye sahip olmamakta yardımcı olacaktır.

Benzer bir sorunum vardı. value="something"Göstermek ve düzenlemek için kullanamadım . Ben <input>ilan modeli ile birlikte benim içinde aşağıdaki komutu kullanmak zorunda kaldı .

[(ngModel)]=userDataToPass.pinCode

Nesnede veri listesi var ve userDataToPassgörüntülemek ve düzenlemek için gereken öğedir pinCode.

Aynı şekilde, bu YouTube videosundan bahsettim