Question

如果某个值为空或不存在，我想显示一个Bootstrap模式。我的第一个解决方案是将值传递给checkbox函数：

// The object of functionality is to activate a 
// Bootstrap modal when the checkbox is checked, 
// but only if **{{part.ordered_from}}** is **empty**.

// OPTION 1 (Pass ordered_from into function):

<ul ng-repeat="part in partstoorder">

    <li>{{part.ordered_from}}</li>
    <li><input type="checkbox" ng-change="change(ordered, {{part.id}}, {{part.vehicle_id}}, {{part.ordered_from}})"
        ng-true-value="1" ng-false-value="0" ng-model="ordered" name="part-ordered"  />
    <li>

</ul>

<script>

$scope.change = function(value, id, vehicle_id, ordered_from) {

    if (ordered_from && ordered_from != '') {


        $('#myModal').modal('show');

    }

};

</script>

我的第二个选项是在复选框和数据属性中添加一个ID，这样我就可以找到dom中的复选框并获取值：

// OPTION 2 (find the value of a data-ordered_from property):

<ul ng-repeat="part in partstoorder">

    <li>{{part.ordered_from}}</li>
    <li><input type="checkbox" ng-change="change(ordered, {{part.id}}, {{part.vehicle_id}})" id="ordered-from-checkbox-{{part.id}}"
        ng-true-value="1" ng-false-value="0" ng-model="ordered" name="part-ordered" data-ordered_from="{{part.ordered_from}}"  />
    <li>

</ul>

<script>

$scope.change = function(value, id, vehicle_id, ordered_from) {

    var orderedFrom = $('.ordered-from-checkbox-' + id).attr('data-ordered_from');

    if (orderedFrom && orderedFrom != '') {

        $('#myModal').modal('show');

    }

};

</script>

我对这些解决方案中的任何一个都不满意，因为我确信使用Angular可以更优雅地实现功能。任何帮助表示赞赏

Answer 1

我认为角度方式是使用类似的指令：

<input type="checkbox"  ng-model="part" name="part-ordered" my-popup >

然后在你的指令中你可以看到模型：

app.directive('myPopup', function($compile) {
  return {
    restrict: 'AE',
    link: function($scope, elem, attr) {
      $scope.$watch(attr.ngModel, function(newVal, oldVal){
          //if condition then do $('#myModal').modal('show');  
          //you could provide a template that is the modal even then do $(element).modal('show')

      });
    }
  };
});

Answer 2

你是对的，有一个更优雅的解决方案

检查ng-if

只需将该属性添加到HTML

即可

<div id="myModal" ng-if=modalControl></div>

并在$ scope

中显示/隐藏它时进行修改

Answer 3

你的第一个选择是确定顺便说一句。我想改善你的病情

<ul ng-repeat="part in partstoorder">
    <li>{{part.ordered_from}}</li>
    <li><input type="checkbox" ng-change="change(ordered, {{part.id}}, {{part.vehicle_id}}, {{part.ordered_from}})"
        ng-true-value="1" ng-false-value="0" ng-model="ordered" name="part-ordered" >
    <li>
</ul>

<script>
$scope.change = function(value, id, vehicle_id, ordered_from) {
    if (!angular.isDefined(ordered_from)) {
        $('#myModal').modal('show');
    }
};
</script>

处理这种情况的角度方式

3 个答案: