标签: angularjs-ng-model

这是一些快速的背景信息.我刚升级到Angular 1.4.我正在使用用C#编写的API来进行服务器端调用.

我页面的一部分显示了2个选择列表(项目和子项目).两者都应默认为"(选择______)",我将其列为每个选择的第一个选项,其中"值"为0.适当的ng模型变量初始化为0.

选择列表的实际HTML代码是在服务器端使用字符串连接生成的,通过$ http传递给客户端,并使用调用$ compile的指令插入(完全不理想,但我的客户端几乎链接了我)到这个API).在1.4更新之前,一切都运行良好.

现在,我的项目选择列表默认为什么都没有.当我检查元素时,这就是我所看到的......

<select ng-change="updateSubProjList()" ng-model="curProjID">
    <option value="? number:0 ?"></option>
    <option value="0">(Select a Project)</option>
    <option value="1">First Project</option>
    <option value="2">Second Project</option>
    ...
</select>

......首先是"？数字:0？" 条目是当前选择的条目.我的子项目选择列表仍然初始化很好,这使得这更奇怪.

我知道在对AngularJS 1.4的更新中有一些$ compile的更新,但我无法找到解决问题的方法.任何帮助将不胜感激.

如何访问子指令控制器？具体来说,我需要访问父指令中存在的所有ngModelController.例:

<parent-directive>
  <input type="text" ng-model="model1"/>
  <input type="text" ng-model="model2"/>
</parent-directive>

那么,"parentDirective"是否有办法访问"model1"和"model2"的ngModelControllers？

http://plnkr.co/edit/RP9SpO1qGjn5Ua6pZJ3D?p=preview

JS

angular.module("sampleapp", []).controller('samplecontroller', function($scope,$rootScope) {
  $scope.radii = [
    {id:.25, checked:false, name:"1/4 Mile"},
    {id:.5, checked:false, name:"1/2 Mile"},
    {id:1, checked:false, name:"1 Mile"},
    {id:2, checked:true, name:"2 Mile"},
    {id:3, checked:false, name:"3 Mile"},
    {id:4, checked:false, name:"4 Mile"},
    {id:5, checked:false, name:"5 Mile"}
];

$scope.handleRadioClick = function(){
    alert();

};
});

和HTML

          <div class="radio">
            <label>
              <input type="radio" name="radius"

                   ng-change="handleRadioClick()"
                   ng-checked="radius.checked">

              {{radius.name}}

            </label>
          </div>

      </li>

注意根据半径范围结构检查"2 Mile"无线电输入.为什么ng-change不会触发功能？

如果我添加ng-model,函数会触发,但ng-checked不起作用.

我有以下循环,其中我试图每次通过循环基于数组索引递增几个字段.

<div class="individualwrapper" ng-repeat="n in [] | range:4">
  <div class="iconimage"></div>
  <div class="icontext">
    <p>Imagine that you are in a health care facility.</p> 
    <p>Exactly what do you think this symbol means?</p>
    <textarea type="text" name="interpretation_1" ng-model="interpretation_1" ng-required="true"></textarea>
    <p>What action you would take in response to this symbol?</p>
    <textarea type="text" name="action_1" ng-model="action_1" ng-required="true"></textarea>  
  </div>
</div>

我想做类似的事情"

ng-model="interpretation_{{$index + 1}}"

Angular虽然没有渲染这个值？在mg模型领域中添加这种逻辑的最佳方法是什么？

我一直在看Angular文档:https: //docs.angularjs.org/guide/forms#custom-validation

我正在尝试使用自定义指令创建自己的输入字段验证器.我创建了一个与上面链接相似的指令,只使用我自己的验证功能(6位密码)进行了自定义:

app.directive('password', function() {
   return {
       require: 'ngModel',
       link: function(scope, element, attrs, ctrl) {
           ctrl.$validators.password = function (modelValue, viewValue) {
               if (/^[0-9]{6}$/.test(viewValue)) {
                   return true;
               }

               return false;
           };
       }
   };
});

当我运行它时,我收到此错误:

Error: ctrl.$validators is undefined

我在这里错过了什么？

我是Angular的新手,我正在尝试做一些非常基本的事情.这是视图的一部分(所有角度文件都添加到其他地方):

 <div ng-controller='ctrl'>
    <input type='text' ng-model='id'>
 </div>

这是我的控制器:

 module.controller('ctrl',['$scope', function ($scope) {

    // get the scope value here
}]);

我想做的事情非常简单.我想使用输入值.我尝试了类似的东西,$scope.data = []并$scope.data.push($scope.id)创建一个具有范围值的数组,但它不起作用.当我试图显示该值时,我在控制台上得到了一个"未定义".

你们有什么想法吗？

编辑:视图还有一个带ng-click指令的按钮,它触发控制器的功能,我试图获取我的值.

我有一个表,我想在该表中添加内联编辑.我开始使用ng-grid,然而,我认为虽然它运行良好,但我花了太多时间来修复样式,以便它与我网站的整体主题相匹配.我开始新鲜,我现在使用一个普通的旧html表与angularjs在幕后为其令人敬畏的双向数据绑定属性.

一切都进展顺利,除了一个事实,即我被困在试图让行内编辑与引导,日期选择器的工作:http://www.eyecon.ro/bootstrap-datepicker/?utm_source=twitterfeed&utm_medium=twitter.我使用这个日期选择器而不是xeditable说你应该使用的ui-bootstrap datepicker的原因是因为它在我的网站中看起来或感觉不对.这是ui-bootstrap datepicker的样子http://jsfiddle.net/NfPcH/23/.我喜欢bootstrap datepicker的简单外观.

这是一个带有可编辑和日期字段的表的plunker,可以尝试编辑PLUNKER

使用bootstrap-datepicker作为输入字段工作正常,使用自定义指令正确更新模型:

editablegrid.directive('datepicker', function() {
return {
    restrict : 'A',
    require : 'ngModel',
    link : function(scope, element, attrs, ngModelCtrl) {
        $(function() {
            var dp = $(element).datepicker({
                format : 'MM dd, yyyy'
            });

            dp.on('changeDate', function(e) {
                ngModelCtrl.$setViewValue(e.format('MM dd, yyyy'));
                scope.$apply();
            });
        });
    }
}

我更改了可编辑的源代码以使用bootstrap-datepicker(请参阅xeditable.js的第78-84行)

/*
The New directive I've made for xeditable to use with the bootstrap-datepicker
*/
angular.module('xeditable').directive('editableBsdateNew', ['editableDirectiveFactory',
  function(editableDirectiveFactory) {
    return editableDirectiveFactory({
      directiveName: 'editableBsdateNew',
      inputTpl: '<input type="text" class="form-control …

我正在尝试将输入字段中的值绑定到ng-click上的方法参数.这是我得到的,但它不起作用,我不太确定是否可以这样做？:

<input type="text" name="name" value="{{post.PostId}}" />
<button ng-click="getById(post.PostId)"></button>
<h1>{{post.Title}}</h1>


$scope.getById = function (id) {
        console.log(id);
        return $http.get('/api/Post/' + id);
    }

我从1.2.14迁移到1.4.8时遇到了这种情况.这在1.2.14中工作正常,但我在1.4.8中获得了无限的$ digest()循环.这是一个小提琴,展示了这个问题.小提琴比这篇文章更容易看,但是SO让我包括代码

我有一个select看起来像这样的元素:

<select ng-model="selectedId" ng-options="opt.id as opt.label for opt in getOptions()">

我的选项是对象,如下所示:

$scope.options = [ { id: 1, label: 'one' }, { id: 2, label: 'two' } ];

我想给出ngOptions指令的选项数组取决于条件; 有时我只是想给它$scope.options,但有时我想包括另一个选项.

$scope.getOptions = function() {
    if ($scope.showThirdOption)
        return [{ id: 3, label: 'three' }].concat($scope.options);
    else
        return $scope.options;
};

现在,如果我以编程方式将我的模型设置为3:

...
$scope.selectedId = 3;
...

......即使该选项不存在,Angular也不会感到沮丧.它只是<option>向<select>元素添加一个节点:<option value="?" selected="selected"></option>下拉列表中的选定值显示为空白.

但是,如果我然后设置我的状态st我的getOptions()返回另外的选项:

...
$scope.selectedId = 3;
$scope.showThirdOption = …

我有一个HTML表格如下:

<tbody>
    <tr ng-repeat="r in targetTable.rows">
      <td contenteditable="true" class=""></td>
      <td contenteditable="true"
          ng-repeat="column in targetTable.columns"
          ng-model="r[column.id]"
          ng-blur="!r.id? addNewRow(r[column.id], r): undefined">
      </td>             
    </tr>
</tbody>

我使用contenteditable指令使单元格可编辑.

app.directive('contenteditable', ['$sce', function($sce) {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, element, attrs, ngModel) {
      var disable = (attrs.contenteditable === "false") || !Boolean(attrs.contenteditable);
      if (!ngModel || disable) return; // do nothing if no ng-model

      // Write data to the model
      var read = function(value) {
        var html = element.html() || (typeof value === "string" ? value …